Bài đọc

CSS Grid và danh mục: nền tảng và mô hình tư duy

2 phút đọc

Đây là bài 1 của chương 5: CSS Grid và danh mục, thuộc khóa demo HTML & CSS. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng website giới thiệu khóa học có trang chủ, danh sách bài học và biểu mẫu đăng ký.

Mục tiêu cụ thể

Grid tổ chức bố cục hai chiều. Kết hợp repeat, auto-fit và minmax tạo số cột thay đổi theo không gian có sẵn mà không cần viết nhiều breakpoint.

Hiểu vấn đề trước khi dùng công cụ

Chương này tập trung vào một quyết định cụ thể: Xây danh sách sáu khóa học, tự chuyển một đến ba cột theo kích thước màn hình. Đừng bắt đầu bằng cách chép nguyên ví dụ. Hãy chỉ ra thành phần nào là dữ liệu, thành phần nào là quy tắc và đâu là kết quả quan sát được. Một giải pháp đúng với dữ liệu mẫu vẫn có thể sai khi đầu vào rỗng, kích thước lớn hơn hoặc có hai thao tác xảy ra gần nhau.

Ví dụ tối thiểu

<style>
.catalog { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
</style>
<div class="catalog"><article>Khóa HTML</article><article>Khóa CSS</article><article>Khóa JS</article></div>

Giới hạn cần hiểu

Min-width của nội dung có thể khiến một cột lớn hơn mong đợi. Grid không tự đảm bảo thứ tự đọc nếu dùng order hoặc vị trí thủ công thiếu cẩn thận.

Câu hỏi để tự giải thích

Bạn sẽ giải thích css grid và danh mục cho người mới bằng ví dụ nào?
Phần nào của ví dụ là giả định, phần nào cần kiểm tra bằng thực nghiệm?
Nếu bỏ một điều kiện quan trọng, kết quả sẽ sai ở đâu?

Kết quả cần đạt

Thứ tự đọc trùng thứ tự hiển thị
Khoảng cách giữa thẻ đồng nhất
Màn hình 320px không tràn ngang