Trình tạo CSS Grid là công cụ trực tuyến miễn phí thiết kế bố cục lưới trực quan. Đặt hàng, cột, gap và vị trí ô bằng kéo thả, tự động tạo mã CSS Grid.
Cách sử dụng Tạo CSS Grid?
Đặt số hàng và cột.
Kéo ô để gộp vùng hoặc điều chỉnh bố trí.
Sao chép mã CSS Grid đã tạo và sử dụng trong dự án.
Câu hỏi thường gặp về Tạo CSS Grid
Sự khác biệt giữa CSS Grid và Flexbox là gì?
CSS Grid dùng cho bố cục 2D (hàng + cột), Flexbox cho bố cục 1D (hàng hoặc cột). Grid phù hợp hơn cho bố cục trang phức tạp.
Đơn vị fr là gì?
fr (fraction) là đơn vị tỷ lệ dùng trong CSS Grid. Ví dụ, 1fr 2fr chia không gian theo tỷ lệ 1:2. Rất hữu ích cho bố cục responsive.
Có thể dựng lưới đáp ứng mà không cần media query không?
Được. Viết repeat(auto-fit, minmax(240px, 1fr)) là bạn chỉ ấn định chiều rộng tối thiểu của cột và để trình duyệt lo phần còn lại: cột được thêm vào khi khung nhìn rộng ra và bớt đi khi hẹp lại, phủ từ điện thoại tới máy tính mà không cần một điểm ngắt nào. Lưu ý auto-fill để lại các rãnh trống ở phần dư, còn auto-fit kéo giãn các cột hiện có để lấp đầy, nên khi ít mục thì hai giá trị cho kết quả khác nhau.
Một từ dài làm giãn một cột lưới và vỡ bố cục.
Mục lưới mặc định có kích thước tối thiểu là auto, nghĩa là chúng không chịu co nhỏ hơn nội dung bên trong — một URL dài hay một từ không thể ngắt sẽ banh rộng cả cột. Đặt min-width: 0 cho mục đó sẽ cho phép lưới co lại, và thêm overflow-wrap: anywhere sẽ khiến chuỗi dài xuống dòng. Định nghĩa cột bằng minmax(0, 1fr) thay vì 1fr trần sẽ triệt tiêu nguyên nhân ngay từ gốc, và đó là lý do cách này rất phổ biến.
Cách tận dụng Tạo CSS Grid hiệu quả?
repeat(auto-fit, minmax(240px, 1fr)) tự đổi số cột mà không cần media query nào.
Dùng gap thay cho margin để cột cuối cùng không bị dư khoảng trắng.
Với bố cục phức tạp, hãy đặt tên vùng bằng grid-template-areas cho dễ đọc về sau.