Đối với các nhà phát triển web, việc thiết kế bố cục trang web luôn là một vấn đề quan trọng. Quá trình phát triển bố cục web trải qua bốn giai đoạn chính:
1. Bố cục dạng bảng (table);
2. Bố cục sử dụng float và position;
3. Mô hình flexbox - bước đột phá giải quyết ba vấn đề lớn của các phương pháp bố cục truyền thống: "hướng sắp xếp", "cách căn chỉnh" và "tự động điều chỉnh kích thước". Đây là phương án bố cục mạnh mẽ nhất hiện nay;
4. Bố cục grid - mô-đun bố cục hai chiều có khả năng định vị và điều chỉnh nội dung mạnh mẽ, phù hợp cho các bố cục cần căn chỉnh nội dung theo cả hai chiều. CSS Grid đã làm cho lưới trở nên đơn giản hơn nhiều. Chúng ta không còn phải lo lắng về các phép tính phức tạp trong lưới.
Dưới đây là một số ví dụ minh họa cách sử dụng:
**1. Tạo bố cục lưới cố định 4 cột**, chỉ cần khai báo `grid-template-columns` với giá trị `100px` lặp lại bốn lần:
**2. Lưới đáp ứng**
— Phương pháp 1: Sử dụng đơn vị fr
Nếu muốn đảm bảo rằng mỗi cột luôn có độ rộng bằng nhau, cần sử dụng hàm `minmax(0, 1fr)` để chỉ định rõ ràng.
— Phương pháp 2: Truy vấn phương tiện (media queries)
**3. Lưới dựa trên chiều cao: Kết hợp grid + calc**
**4. Đặt các mục trong lưới:**
Các từ khóa chính: `grid-row` (viết tắt của `grid-row-start` và `grid-row-end`),
`grid-column` (viết tắt của `grid-column-start` và `grid-column-end`).
Sử dụng từ khóa `span` để chỉ định số lượng cột mà mục sẽ chiếm giữ.
Dưới đây là toàn bộ mã nguồn của các ví dụ trên:
.lattice {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
column-gap: 20px;
}.lattice-fr {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 20px;
min-height: 70px;
margin-top: 20px;
}.lattice-fr_equal {
grid-template-columns: repeat(4, minmax(0, 1fr));
}@media (max-width: 960px) {
.lattice-fr_media {
grid-template-columns: repeat(2, 1fr);
}
}.lattice-fr_height {
height: 500px;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-auto-columns: calc((500px - 3em) / 4);
grid-auto-flow: column;
gap: 1em;
}
.lattice-fr_height .item:nth-child(3n) {
background-color: red;
}
.lattice-fr_height .item:nth-child(3n + 2) {
background-color: orange;
}.lattice-fr_select .item {
/* Đặt ở cột thứ hai, chiếm 2 cột */
grid-column: 2 / span 2;
background-color: red;
}<html>
<head>
<meta charset="UTF-8">
<title>CSS-grid</title>
<style>
.lattice {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
column-gap: 20px;
min-height: 70px;
}
.item {
background-color: #f2f2f2;
padding: 15px;
}
.lattice-fr {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 20px;
min-height: 70px;
margin-top: 20px;
}
.lattice-fr_equal {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lattice-fr_unequal {
grid-template-columns: 1fr 1.618fr 2.618fr;
}
@media (max-width: 960px) {
.lattice-fr_media {
grid-template-columns: repeat(2, 1fr);
}
}
.lattice-fr_height {
height: 500px;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-auto-columns: calc((500px - 3em) / 4);
grid-auto-flow: column;
gap: 1em;
}
.lattice-fr_height .item:nth-child(3n) {
background-color: red;
}
.lattice-fr_height .item:nth-child(3n + 2) {
background-color: orange;
}
.lattice-fr_select .item {
/* Đặt ở cột thứ hai, chiếm 2 cột */
grid-column: 2 / span 2;
background-color: red;
}
</style>
</head>
<body>
<h3>Lưới cố định</h3>
<div class="lattice">
<div class="item">Mỗi cột có chiều rộng 100px</div>
<div class="item">Mỗi cột có chiều rộng 100px</div>
<div class="item">Mỗi cột có chiều rộng 100px</div>
<div class="item">Mỗi cột có chiều rộng 100px</div>
</div>
<h3>Lưới đáp ứng: Phương pháp 1: Sử dụng đơn vị fr</h3>
<div class="lattice-fr">
<div class="item">fr là đơn vị linh hoạt đại diện cho một phần không gian.</div>
<div class="item">Khi bạn sử dụng fr, trình duyệt sẽ phân chia không gian còn lại và phân bổ nó cho các cột.</div>
<div class="item">Sử dụng đơn vị fr</div>
<div class="item">Sử dụng đơn vị fr</div>
</div>
<h3>Lưới tạo bởi fr không luôn có kích thước bằng nhau!</h3>
<div class="lattice-fr">
<div class="item">
<img src="img/2.jpg"/>
</div>
<div class="item">Mỗi đơn vị fr là một phần nhỏ của không gian còn lại.</div>
<div class="item">Nếu phần tử của bạn rộng hơn bất kỳ cột nào được tạo bởi fr, cần tính toán khác.</div>
<div class="item"></div>
</div>
<h3>Để đảm bảo rằng fr luôn tạo ra các cột có kích thước bằng nhau, hãy sử dụng minmax(0, 1fr).</h3>
<div class="lattice-fr lattice-fr_equal">
<div class="item">
<img src="img/2.jpg"/>
</div>
<div class="item">Sử dụng minmax() để xác định kích thước tối thiểu hoặc tối đa của đường dẫn lưới.</div>
<div class="item">Minmax() nhận hai tham số: tham số đầu tiên xác định giá trị tối thiểu, tham số thứ hai xác định giá trị tối đa.</div>
<div class="item">Có thể nhận bất kỳ giá trị độ dài nào hoặc giá trị auto.</div>
</div>
<h3>Lưới không đều</h3>
<div class="lattice-fr lattice-fr_unequal">
<div class="item">Chỉ cần thay đổi hệ số fr để tạo lưới không đều.</div>
<div class="item">Ví dụ: grid-template-columns: 1fr 1.618fr 2.618fr;</div>
<div class="item">Ý nghĩa: Cột thứ hai là 1.618 lần cột đầu tiên, cột thứ ba là 1.618 lần cột thứ hai.</div>
</div>
<h3>repeat()</h3>
<div class="lattice-fr">
<div class="item">repeat() có thể tạo ra các đường dẫn lưới lặp lại.</div>
<div class="item">Thích hợp cho việc tạo các mục lưới có kích thước bằng nhau và nhiều mục lưới.</div>
<div class="item">repeat() nhận hai tham số: số lần lặp lại và kích thước của mỗi đường dẫn.</div>
<div class="item">Ví dụ này có thể viết thành grid-template-columns: repeat(4,1fr)</div>
</div>
<h3>Lưới đáp ứng: Phương pháp 2: Media queries</h3>
<div class="lattice-fr lattice-fr_media">
<div class="item">Sử dụng @media (min-width: ***) {} để tạo điểm dừng.</div>
<div class="item">Khi bạn sử dụng fr, trình duyệt sẽ phân chia không gian và phân bổ nó cho các cột.</div>
<div class="item">Sử dụng đơn vị fr</div>
<div class="item">Sử dụng đơn vị fr</div>
</div>
<h3>Lưới dựa trên chiều cao</h3>
<div class="lattice-fr_height">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h3>Đặt các mục trong lưới</h3>
<div class="lattice-fr lattice-fr_select">
<div class="item">Sử dụng từ khóa span để chỉ định số lượng cột mà mục sẽ chiếm giữ.</div>
<div class="item">Sử dụng từ khóa span để chỉ định số lượng cột mà mục sẽ chiếm giữ.</div>
<div class="item">Sử dụng từ khóa span để chỉ định số lượng cột mà mục sẽ chiếm giữ.</div>
</div>
</body>
</html>