Trình tạo CSS Grid
Công cụ tạo CSS Grid dựng bố cục lưới từ số cột và số hàng, khoảng cách, giá trị grid-template tùy chỉnh (không bắt buộc) và cách căn phần tử, kèm xem trước trực tiếp và CSS sẵn để sao chép.
Về công cụ này
Công cụ tạo CSS Grid dựng bố cục lưới từ số cột và số hàng, khoảng cách, giá trị grid-template tùy chỉnh (không bắt buộc) và cách căn phần tử, kèm xem trước trực tiếp và CSS sẵn để sao chép.
Cách sử dụng
- Đặt số cột và số hàng.
- Điều chỉnh khoảng cách giữa cột và giữa hàng.
- Nhập template tùy chỉnh nếu muốn, ví dụ 200px 1fr 1fr.
- Chọn justify-items và align-items, rồi bấm Copy CSS.
Điều nên biết
- Đơn vị fr chia phần không gian trống: 1fr 2fr cho cột thứ hai rộng gấp đôi cột thứ nhất.
- repeat(3, 1fr) là cách viết tắt cho ba cột bằng nhau.
- column-gap và row-gap đặt khoảng cách giữa các track.
- Grid là bố cục hai chiều, điều khiển cả hàng và cột cùng lúc.
- repeat(auto-fit, minmax(200px, 1fr)) tạo lưới responsive mà không cần media query.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Làm sao để tạo lưới 3 cột bằng CSS?
Dùng display: grid; grid-template-columns: repeat(3, 1fr); trên container và thêm gap để tạo khoảng cách.
fr trong CSS Grid nghĩa là gì?
fr là một phần của không gian trống còn lại trong grid container.
Nên dùng CSS Grid hay Flexbox?
Grid phù hợp nhất cho bố cục hai chiều như cấu trúc trang và lưới thẻ; Flexbox cho hàng hoặc cột một chiều.
Làm sao để tạo lưới responsive mà không cần media query?
Dùng grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); các cột sẽ tự xuống dòng tùy theo không gian.