Bạn sẽ chuyển danh sách bài học từ các khối xếp dọc sang một lưới có cột rõ ràng. Qua ví dụ, bạn hiểu grid container, item và đơn vị fr trước khi xây bố cục phức tạp.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Khi nào cần nhìn theo hai chiều?

Nếu các hàng card cần chung các đường cột, Grid thường biểu đạt nhu cầu rõ ràng. Flexbox wrap chia mỗi dòng theo cách riêng; không phải lúc nào các item ở nhiều hàng cũng có chung ranh giới cột. Không nên lấy nhãn “một chiều/hai chiều” để cấm một công cụ làm bất kỳ tình huống khác, nhưng đó là cách nhập môn hữu ích.

display:grid đặt trên vùng chứa. Các con trực tiếp là grid item. Như Flexbox, việc dàn item không tự biến mọi phần tử sâu bên trong thành item của cùng lưới.

Đọc khai báo cột

grid-template-columns:repeat(3,minmax(0,1fr)) tạo ba cột chia phần không gian khả dụng theo tỷ lệ bằng nhau và cho phép min-size là 0 ở định nghĩa track. Khoảng gap được tính riêng trước khi phần còn lại được chia. 1fr không có nghĩa mỗi item luôn là đúng một phần ba tổng chiều rộng gồm cả gap.

Trong ví dụ nhập môn, media query đổi về một cột ở vùng hẹp để đảm bảo dùng được. Bài sau sẽ giải thích cách tạo số cột linh hoạt hơn bằng auto-fit và minmax.

Hàng tự sinh và chiều cao nội dung

Nếu chỉ định cột và có nhiều item hơn số cột, Grid thường tạo thêm hàng theo auto-placement. Chiều cao hàng còn phụ thuộc nội dung và quy tắc track; không cần đặt height cố định chỉ để mọi card cùng cao trong một ảnh mẫu.

Các item có thể stretch theo vùng của chúng. Nếu nội dung dài gây tràn, kiểm tra kích thước tối thiểu của track và item. minmax(0,1fr) hữu ích trong một số trường hợp nhưng không tự ngắt được mọi chuỗi dài hoặc xử lý mọi ảnh.

Giữ thứ tự nội dung

Ở bài này để card đi theo thứ tự DOM. Grid có thể đặt item vào ô theo line hoặc area, nhưng điều đó không tự đổi trình tự đọc của công cụ hỗ trợ. Hãy kiểm tra khi tạo bố cục khác thứ tự mã.

Bật grid overlay trong DevTools để xem track, line và gap. Nó giúp phân biệt khoảng gap của lưới với padding của card, tránh sửa nhầm hai loại khoảng cách.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<p>Danh sách “Bài học mới” bên dưới là grid container; mỗi card là một item.</p>

Thêm hoặc sửa trong styles.css

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cards > * { min-width: 0; }
@media (max-width: 42rem) { .cards { grid-template-columns: 1fr; } }

So sánh trước và sau

Ở cửa sổ rộng, ba card chia ba cột. Ở cửa sổ hẹp, chúng trở về một cột. Gap tạo khoảng cách giữa card, còn padding thuộc từng card.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Đặt grid-template-columns trên từng card: đặt ở vùng chứa.
• Quên gap khi tính ba cột 33.33%: dùng track phù hợp.
• Đảo thứ tự hiển thị mà không kiểm tra bàn phím: xem lại thứ tự DOM.

Tự kiểm tra

• Thêm card thứ tư và quan sát hàng mới.
• Dùng overlay để phân biệt line, track và gap.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML