CSS Grid Generator

Build CSS Grid layouts visually.

grid-template-columns

grid-template-rows

column-gap

row-gap

justify-items

align-items

justify-content

Số lượng mục: 6

Xem trước

CSS được tạo

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

Giới thiệu công cụ

Công cụ tạo CSS Grid Layout cho phép bạn thiết kế trực quan bố cục lưới hai chiều bằng cách điều chỉnh grid-template-columns, grid-template-rows, thuộc tính gap và cài đặt căn chỉnh. Bản xem trước trực tiếp cho thấy kết quả trước khi viết code.

CSS Grid là hệ thống bố cục mạnh nhất trong CSS, được thiết kế cho bố cục hai chiều (hàng VÀ cột đồng thời). Bổ sung cho Flexbox xử lý bố cục một chiều.

Cách sử dụng

Đặt grid-template-columns để xác định cấu trúc cột. Dùng nút preset cho các mẫu phổ biến.
Tùy chọn đặt grid-template-rows (để auto cho hầu hết bố cục).
Điều chỉnh column-gap và row-gap cho khoảng cách.
Dùng justify-items và align-items kiểm soát vị trí item trong ô.
Thay đổi số lượng item bằng thanh trượt để xem grid phản ứng.
Nhấp Sao chép để sao chép CSS được tạo.

Trường hợp sử dụng

Nhà phát triển front-end dùng CSS Grid cho bố cục trang, cấu trúc dashboard và gallery ảnh. Nhà thiết kế xuất thông số grid dưới dạng CSS chính xác để chia sẻ với nhà phát triển. Nhóm design system dùng để tạo nguyên mẫu khoảng cách và mẫu cột.

Câu hỏi thường gặp

1fr có nghĩa là gì? — fr là đơn vị phân số. 1fr nghĩa là một phần không gian khả dụng. repeat(3, 1fr) tạo ba cột bằng nhau.
Khi nào dùng Grid, khi nào dùng Flexbox? — Dùng Grid cho bố cục hai chiều (hàng và cột). Dùng Flexbox khi sắp xếp item theo một hướng.
CSS Grid được hỗ trợ trên tất cả trình duyệt không? — Có. CSS Grid được hỗ trợ đầy đủ trên tất cả trình duyệt hiện đại từ năm 2017.