Bạn sẽ tạo một lưới card tự chọn số cột theo không gian, đồng thời dựng một vùng nội dung–sidebar không tràn khi màn hình nhỏ. Mỗi công thức được gắn với giới hạn cụ thể của nội dung.

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.

Từ ba cột cố định tới số cột theo chỗ trống

repeat(auto-fit,minmax(…,1fr)) là một mẫu thường gặp để tạo các cột có kích thước tối thiểu rồi chia không gian còn lại. Auto-fit có thể thu gọn những track rỗng; auto-fill giữ cách phân bố track rỗng khác. Không cần nhớ chúng là hai từ đồng nghĩa.

Nếu đặt minmax(16rem,1fr), vùng chứa nhỏ hơn 16rem vẫn có thể tràn. Mẫu dùng min(100%,16rem) làm mức tối thiểu giúp nó không ép một cột vượt chính vùng chứa trong tình huống ví dụ.

Bố cục nội dung và sidebar

Một vùng đọc cần nhiều chỗ hơn sidebar. Trên màn hình rộng, ta có thể dùng minmax(0,2fr) và minmax(12rem,1fr). Khi không đủ chỗ, trở về một cột theo thứ tự HTML. Đừng để sidebar cố định 400px trong một cửa sổ chỉ rộng 390px.

Sidebar là vai trò nội dung phụ trong HTML khi phù hợp, không phải chỉ vì một hộp đang ở phía bên phải. CSS quyết định vị trí; HTML quyết định ý nghĩa.

Nội dung dài và kích thước tối thiểu

Một URL không ngắt, code dài hoặc ảnh lớn có thể làm kích thước min-content vượt dự kiến. Chọn min-width:0 cho item phù hợp và xử lý ngắt dòng hoặc vùng cuộn của nội dung bên trong. Không che toàn bộ overflow rồi bỏ mất nút và chữ.

Các công thức nên được thử với nội dung ít và nhiều, không chỉ ba card cùng chiều dài. Một lưới co giãn tốt còn phải chịu được text zoom và các phiên bản ngôn ngữ khác.

Không cần dùng mọi tính năng Grid ngay

Grid có area, subgrid và nhiều cơ chế nâng cao. Với lộ trình cơ bản, đọc được container, track và cách co giãn đã đủ để tạo nhiều giao diện. Học thêm khi có nhu cầu căn các phần bên trong card hoặc chia sẻ track với vùng cha.

Ví dụ có cả lưới card và một vùng layout riêng để bạn kiểm tra hai tình huống. Cùng là Grid nhưng lý do chọn số cột khác nhau, không phải chép một công thức cho mọi vùng.

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.

<div class="content-layout"><section><h3>Nội dung chính</h3><p>Vùng đọc cần đủ không gian cho bài viết.</p></section><aside><h3>Đọc thêm</h3><p>Nội dung liên quan, đứng sau phần chính trong HTML.</p></aside></div>

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

.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-block: 1rem; }
.content-layout > * { min-width: 0; padding: 1rem; background: #edf5fb; }
@media (min-width: 48rem) { .content-layout { grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr); } }

So sánh trước và sau

Card tự đổi số cột khi đủ hoặc thiếu chỗ. Vùng nội dung–sidebar chỉ tách hai cột khi breakpoint đủ rộng; trong khung nhúng hẹp nó có thể vẫn là một cột.

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

• Min-width tối thiểu lớn hơn viewport: giới hạn theo vùng chứa.
• Nhầm auto-fit và auto-fill luôn giống nhau: thử số item ít.
• Dùng sidebar cố định cho mọi màn hình: tạo điều kiện chuyển bố cục.

Tự kiểm tra

• Mở tab riêng, thay chiều rộng để xem lưới đổi số cột.
• Đổi sidebar thành đoạn rất dài rồi kiểm tra tràn.

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