Grid areas
Vùng grid là một hoặc nhiều ô grid tạo thành một vùng hình chữ nhật trên grid. Các vùng grid được tạo ra khi bạn đặt một phần tử bằng cách đặt theo đường line hoặc khi định nghĩa các vùng bằng cách sử dụng named grid areas.
Các vùng grid phải có hình chữ nhật; không thể tạo, ví dụ, vùng grid hình chữ T hoặc hình chữ L.
Ví dụ
Trong ví dụ bên dưới, tôi có một grid container với hai grid item. Tôi đã đặt tên cho chúng bằng thuộc tính grid-area và sau đó bố trí chúng trên grid bằng cách sử dụng grid-template-areas. Điều này tạo ra hai vùng grid, một vùng bao gồm bốn ô grid, vùng còn lại hai ô.
css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
grid-template-areas:
"a a b"
"a a b";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
html
<div class="wrapper">
<div class="item1">Item</div>
<div class="item2">Item</div>
</div>
Xem thêm
Tham khảo thuộc tính
Đọc thêm
- Hướng dẫn bố cục CSS grid:
- Định nghĩa về grid areas trong đặc tả bố cục CSS grid