Ô grid
Trong CSS grid layout, ô grid là đơn vị nhỏ nhất bạn có thể có trên CSS grid của mình. Đây là không gian giữa bốn grid lines giao nhau và về mặt khái niệm rất giống với một ô trong bảng.
Nếu bạn không đặt các phần tử bằng một trong các phương pháp đặt grid, các phần tử con trực tiếp của grid container sẽ được đặt mỗi phần tử vào từng ô grid riêng lẻ bởi thuật toán tự động đặt. Các track hàng hoặc cột bổ sung sẽ được tạo ra để có đủ ô chứa tất cả các phần tử.
Ví dụ
Trong ví dụ chúng ta đã tạo một grid có track ba cột. Năm phần tử được đặt vào các ô grid dọc theo một hàng ban đầu gồm ba ô grid, sau đó tạo một hàng mới cho hai phần tử còn lại.
css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
html
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>