CSSGrid là layout hai chiều: khai báo cả hàng và cột, và item được đặt vào ô của lưới đó.
css
.page {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
min-height: 100dvh;
gap: 16px;
}
.header { grid-area: header; }
.side { grid-area: sidebar; }| Flexbox | Grid | |
|---|---|---|
| Số chiều | một (hàng hoặc cột) | hai (hàng và cột) |
| Bố cục quyết định bởi | nội dung đẩy ra | container định sẵn |
| Hợp với | thanh nav, nhóm nút, chip | bố cục trang, dashboard, gallery |
| Căn thẳng hàng giữa các hàng | không đảm bảo | có |
Khác biệt cốt lõi: Flexbox để nội dung tự quyết định chỗ, Grid để bạn quyết định trước rồi nội dung điền vào.
Hai cái dùng chung được và trong thực tế luôn dùng chung: Grid dựng khung trang, Flex sắp xếp bên trong mỗi ô.
Chốt: dấu hiệu nên chuyển từ Flex sang Grid — bạn đang phải đặt width: 33.33% kèm calc() để trừ gap, hoặc phải ép các card ở hai hàng thẳng cột với nhau.