Tạo Grid CSS
Tạo bố cục CSS Grid với xem trước tương tác.
bấm vào ô để mở rộng
/* Contenedor */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 8px;
}Trình tạo layout CSS Grid trực quan
CSS Grid Layout là hệ thống layout hai chiều mạnh nhất trong CSS. Khác với Flexbox làm việc trên một trục (hàng hoặc cột), CSS Grid cho phép kiểm soát hàng và cột đồng thời, lý tưởng để tạo layout toàn trang, bộ sưu tập ảnh, bảng điều khiển và bất kỳ thiết kế nào cần cấu trúc lưới chính xác và dự đoán được.
Trình tạo trực quan cho phép xác định số cột và hàng, tùy chỉnh mẫu kích thước (grid-template-columns và grid-template-rows) bằng đơn vị như fr, px, % hoặc auto, điều chỉnh khoảng cách giữa ô (column-gap và row-gap), và mở rộng ô riêng lẻ để chiếm nhiều cột hoặc hàng bằng grid-column: span và grid-row: span.
Xem trước cập nhật thời gian thực hiển thị chính xác giao diện grid. Nhấp vào bất kỳ ô nào để chọn và dùng điều khiển mở rộng để chiếm nhiều hơn một cột hoặc hàng. Mã CSS được tạo bao gồm tất cả thuộc tính cần thiết để tái tạo layout chính xác, sẵn sàng sao chép và dùng trong dự án.
Câu hỏi thường gặp
Đơn vị "fr" nghĩa là gì?
Đơn vị "fr" (phần) đại diện cho một phần của không gian khả dụng trong container grid. Ví dụ, "1fr 2fr" tạo hai cột trong đó cột thứ hai rộng gấp đôi cột đầu. Tương tự flex-grow nhưng trực quan hơn để định nghĩa tỷ lệ.
CSS Grid có thay thế Flexbox không?
Không, chúng bổ sung cho nhau. Grid tốt hơn cho layout hai chiều (hàng và cột), trong khi Flexbox vượt trội cho layout một chiều (một hàng hoặc cột). Thường dùng Grid cho cấu trúc tổng thể trang và Flexbox để căn chỉnh nội dung trong mỗi phần.
Làm thế nào để một ô chiếm nhiều cột?
Trong công cụ, nhấp vào ô và dùng nút "+" để mở rộng. Trong CSS, thực hiện bằng "grid-column: span 2" (cho 2 cột) hoặc "grid-row: span 2" (cho 2 hàng). Cũng có thể chỉ định vị trí chính xác với "grid-column: 1 / 3".
Muốn tìm hiểu thêm? Đọc hướng dẫn đầy đủ →