Trong bài trước, bạn đã học cách tạo lưới đơn giản bằng grid-template-columns và grid-template-rows. Nhưng CSS Grid không dừng lại ở đó.
Trong bài học này, chúng ta sẽ đi xa hơn:
- Đặt phần tử vào vị trí chính xác bằng
grid-row,grid-column - Gộp nhiều cột/dòng cho một phần tử
- Tạo lưới lồng bên trong ô
- Biết thêm về
grid-areavàgrid-template-areas
1. Đặt phần tử vào vị trí cụ thể
.item1 {
grid-column: 1 / 3; /* từ cột 1 đến trước cột 3 → chiếm 2 cột */
grid-row: 1 / 2; /* dòng 1 → 2 */
}
grid-column: start / endgrid-row: start / end
Đây là cách bạn gộp ô như bảng Excel.
2. Gộp dòng và cột (span)
Cách viết gọn:
.item2 {
grid-column: span 2;
grid-row: span 2;
}
→ Gộp 2 cột và 2 dòng kế tiếp tại vị trí hiện tại.
3. Tạo layout lồng (nested grid)
Bạn có thể đặt một lưới bên trong một ô:
<div class="item3">
<div class="inner-grid">
<div>1A</div>
<div>1B</div>
</div>
</div>
.inner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
→ Dễ dàng xây dựng layout dạng card, section, footer có nhiều cột…
4. Sử dụng grid-area đặt tên vị trí
Bạn có thể đặt tên cho vùng hiển thị, sau đó gán từng item vào tên đó.
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
gap: 10px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
→ Dễ đọc, dễ bảo trì khi tạo layout toàn trang.
5. Thực hành: layout báo chí đơn giản
style.css
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
gap: 20px;
padding: 20px;
}
.item1 {
grid-column: 1 / 3;
background: #81c784;
}
.item2 {
grid-column: 3 / 5;
background: #4db6ac;
}
.item3 {
grid-column: span 2;
background: #64b5f6;
}
.item4 {
background: #9575cd;
}
.item5 {
background: #ffb74d;
}
.item6 {
background: #e57373;
}
.item {
padding: 30px;
color: #fff;
font-weight: bold;
border-radius: 6px;
text-align: center;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 17 – Grid nâng cao</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="item item1">Tin chính</div>
<div class="item item2">Ảnh nổi bật</div>
<div class="item item3">Cột phụ</div>
<div class="item item4">Tin 1</div>
<div class="item item5">Tin 2</div>
<div class="item item6">Tin 3</div>
</div>
</body>
</html>
6. Ghi nhớ
| Thuộc tính | Ý nghĩa |
|---|---|
grid-column | Xác định phần tử nằm từ cột nào đến cột nào |
grid-row | Tương tự với dòng |
span | Gộp nhiều ô theo chiều ngang hoặc dọc |
grid-area | Đặt tên vùng lưới để tổ chức layout rõ ràng |
| Nested grid | Dùng display: grid bên trong phần tử con |
Thảo luận