Grid
CSS grid được định nghĩa bằng cách sử dụng giá trị grid của thuộc tính display; bạn có thể định nghĩa các cột và hàng trên grid của bạn bằng cách sử dụng các thuộc tính grid-template-rows và grid-template-columns.
Grid mà bạn định nghĩa bằng các thuộc tính này được mô tả là grid tường minh (explicit grid).
Nếu bạn đặt nội dung ngoài grid tường minh này, hoặc nếu bạn đang dựa vào tính năng tự động đặt (auto-placement) và thuật toán grid cần tạo thêm các track hàng hoặc cột để chứa ô grid, thì các track bổ sung sẽ được tạo trong grid ngầm. Grid ngầm (implicit grid) là grid được tạo tự động do nội dung được thêm vào bên ngoài các track đã định nghĩa.
Trong ví dụ bên dưới, tôi đã tạo một grid tường minh gồm ba cột và hai hàng. Hàng thứ ba trên grid là track hàng grid ngầm, được hình thành do có nhiều hơn sáu phần tử lấp đầy các track tường minh.
Ví dụ
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
</div>
Xem thêm
- Khái niệm cơ bản về bố cục grid
- Tham khảo thuộc tính: