Hàm repeat trong CSS Grid
Nếu bạn có nhiều cột
được thiết lập cùng một kích thước,
bạn có thể đơn giản hóa cách viết bằng cách sử dụng
hàm repeat.
Tham số đầu tiên của hàm này chỉ định
số lượng cột, và tham số thứ hai - chiều rộng của chúng.
Hãy cùng xem các ví dụ để hiểu cách nó hoạt động.
Ví dụ
Giả sử chúng ta có ba cột có cùng kích thước:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Hãy đơn giản hóa cách viết bằng repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Ví dụ
Giả sử chúng ta có ba cột cùng kích thước, và cột thứ tư có kích thước khác:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Hãy đơn giản hóa cách viết bằng repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Ví dụ
Giả sử ba cột đầu tiên của chúng ta có một kích thước, và ba cột tiếp theo có kích thước khác:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Hãy đơn giản hóa cách viết bằng repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Ví dụ
Giả sử chúng ta có ba cột đầu tiên cùng một kích thước, sau đó thêm một cột, và rồi thêm ba cột có kích thước khác:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Hãy đơn giản hóa cách viết bằng repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Ví dụ
Cách đơn giản hóa này hoạt động với bất kỳ đơn vị kích thước nào. Lấy ví dụ, giả sử chúng ta có ba cột tính bằng pixel:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Hãy đơn giản hóa cách viết bằng repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Bài tập thực hành
Tạo 4 cột có cùng
kích thước bằng cách sử dụng repeat.
Tạo 4 cột có kích thước 100px,
và thêm 3 cột có kích thước 2fr.
Tạo 2 cột có kích thước 100px,
thêm 3 cột có kích thước 200px,
sau đó một cột có kích thước 1fr,
và cuối cùng 2 cột
có kích thước 10%.
