Đây là bài 2 trong phần 5 của chuỗi demo “Sổ tay giao diện web: Từ cấu trúc đến trải nghiệm”. HTML, CSS, responsive và khả năng truy cập qua các tình huống thiết kế giao diện. Bài viết dùng ví dụ và dữ liệu giả để minh họa; hãy thử trên môi trường riêng trước khi áp dụng vào dự án.
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.
Tình huống lỗi
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.
Chẩn đoán có bằng chứng
Trong bài css grid và danh mục, hãy cố ý tái hiện tình huống trên ở môi trường thử nghiệm. Mục tiêu là thấy vì sao kết quả sai và thu thập đủ bằng chứng để phân biệt lỗi dữ liệu, lỗi quy tắc và lỗi cấu hình. Không sửa đồng thời nhiều yếu tố vì bạn sẽ khó xác định nguyên nhân.
- Ghi rõ bước thao tác và kết quả mong đợi.
- Thu nhỏ ví dụ đến mức vẫn tái hiện được lỗi.
- Đối chiếu dữ liệu thực với giả định ban đầu.
- Đặt giả thuyết và thay đổi một yếu tố.
- Xác nhận bằng cách tái chạy ví dụ tối thiểu.
Mẫu đối chiế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>Kiểm tra sau sửa
- 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
Khi lỗi biến mất, thực hiện lại yêu cầu gốc: 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. Sau đó thử trường hợp đầu vào rỗng hoặc trạng thái chưa được khởi tạo nếu phù hợp. Một bản sửa phải khôi phục hành vi đã định nghĩa, không chỉ làm mất thông báo lỗi.
Ghi chú bàn giao
Viết báo cáo ngắn gồm nguyên nhân, phạm vi ảnh hưởng, thay đổi và cách kiểm chứng. Nếu chưa xác định được nguyên nhân, ghi rõ điều còn chưa biết và phép kiểm tra tiếp theo, không biến giả thuyết thành kết luận.