CSSVì float và position không phải công cụ layout — chúng được dùng làm layout vì trước 2017 không có gì tốt hơn.
css
/* float: vốn để chữ chảy quanh ảnh, bị mượn làm cột */
.col { float: left; width: 33.33%; }
.row::after { content: ''; display: block; clear: both; } /* clearfix — dấu hiệu của hack */
/* grid: khai báo đúng ý định */
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }| float | position | Grid | |
|---|---|---|---|
| Số chiều | 1, thủ công | không có khái niệm | 2 |
| Chiều cao cột bằng nhau | phải hack | không | mặc định |
| Khoảng cách | margin + trừ tay | tính tay | gap |
| Responsive | media query cho từng bậc | không | auto-fit/minmax |
| Xếp chồng element | không | được | được, không cần thoát flow |
Hai vấn đề cụ thể của cách cũ:
- float cần clearfix, và cột không tự cao bằng nhau — bài toán "equal height columns" từng có cả chục cách hack.
- position: absolute đưa element ra khỏi flow, nên cha không còn biết con cao bao nhiêu; mọi chiều cao phải đặt cứng.
Chỗ float vẫn đúng: cho chữ chảy quanh một ảnh trong bài viết — đúng công dụng gốc của nó.
Chốt: trả lời "Grid hiện đại hơn" là chưa đủ. Ý đắt giá là float là hack, Grid là khai báo ý định — code nói đúng thứ nó muốn làm thì dễ đọc và dễ sửa hơn.