Tạo CSS Grid
Xem trước thời gian thực
Tại sao dùng công cụ tạo CSS Grid trực quan?
CSS Grid là hệ thống layout mạnh nhất trong CSS nhưng cú pháp có đường cong học tập dốc. Với công cụ trực quan của chúng tôi, bạn có thể điều chỉnh lưới bằng thanh trượt và menu thả xuống và thấy ngay tác động của từng thuộc tính.
Xem trước lưới thời gian thực
Lưới cập nhật thời gian thực khi điều chỉnh cột, hàng, khoảng cách và căn chỉnh
Hỗ trợ đơn vị fr
Mẫu dùng đơn vị fr (phân số) cho lưới linh hoạt thích nghi với kích thước container
CSS sẵn sàng sử dụng
Xuất khối .container CSS gọn gàng với grid-template-columns, rows, gap và align-items
Tạo layout CSS Grid
Cấu hình cột và hàng
Đặt số cột và hàng của lưới bằng thanh trượt
Chọn mẫu và khoảng cách
Chọn mẫu cột (bằng nhau, cố định+linh hoạt hoặc minmax responsive) và điều chỉnh khoảng cách
Sao chép CSS
Nhấp 'Sao chép CSS' để lấy khối CSS đầy đủ sẵn sàng dán vào stylesheet
Các trường hợp sử dụng CSS Grid
Layout trang
Tạo cấu trúc header/sidebar/nội dung chính/footer với named grid areas
Dashboard
Tạo layout dashboard phức tạp với các card kích thước khác nhau dùng grid-column và grid-row span
Thư viện ảnh
Tạo thư viện kiểu masonry hoặc đều đặn thích nghi với auto-fill và minmax
Layout tạp chí
Tạo layout biên tập với cột không đều và nội dung trải qua nhiều ô
Các thực hành tốt nhất cho CSS Grid
✓ Ưu tiên đơn vị fr hơn phần trăm
Đơn vị fr (phân số) phân chia không gian có sẵn sau các cột cố định mà không cần tính toán thủ công.
✓ Dùng minmax() cho lưới responsive
repeat(auto-fill, minmax(250px, 1fr)) tạo lưới responsive tự động điều chỉnh số cột.
✓ Dùng named grid areas
grid-template-areas với các ô đặt tên làm layout trang dễ đọc và dễ sửa đổi.
✓ Hiểu auto-fill vs. auto-fit
auto-fill tạo số track tối đa (kể cả trống). auto-fit thu gọn track trống và mở rộng track hiện có — thường tối ưu cho lưới card.
❓ Câu hỏi thường gặp
Đơn vị fr trong CSS Grid là gì?
fr là viết tắt của 'fractional unit' (đơn vị phân số). 1fr đại diện cho một phần không gian rảnh có sẵn trong container lưới. repeat(3, 1fr) tạo 3 cột chia đều không gian có sẵn.
Sự khác biệt giữa CSS Grid và Flexbox là gì?
Flexbox là một chiều — đặt phần tử dọc theo một trục duy nhất (hàng hoặc cột). CSS Grid là hai chiều — có thể kiểm soát cả hàng và cột đồng thời, mạnh hơn nhiều cho layout trang.
minmax() làm gì?
minmax(min, max) chỉ định phạm vi kích thước cho track lưới. minmax(200px, 1fr) nghĩa là cột tối thiểu 200px rộng nhưng có thể phát triển để điền không gian có sẵn.
Khi nào dùng CSS Grid thay vì Flexbox?
Dùng Grid cho layout hai chiều khi bạn kiểm soát cả hàng và cột đồng thời. Dùng Flexbox cho layout một chiều của component như thanh nav.