Công cụ tạo CSS Grid

Q: Làm sao cho một phần tử trải hết chiều rộng?

Đặt grid-column là `1 / -1`; -1 chỉ đường lưới cuối cùng.

Dựng bố cục CSS Grid trực quan: grid-template-columns/rows, vùng đặt tên có kiểm tra, gap, căn chỉnh và vị trí từng phần tử. Sao chép mã CSS gọn gàng.

Mẫu có sẵn

Vùng chứa

grid-template-columns

grid-template-rows

grid-template-areas

Mỗi dòng là một hàng, các tên cách nhau bằng dấu cách, dấu chấm (.) là ô trống. Mỗi tên phải tạo thành hình chữ nhật.

column-gappx

row-gappx

justify-items

align-items

Số phần tử

Phần tử 1

Chọn phần tử ở đây hoặc nhấp vào nó trong phần xem trước.

grid-column

grid-row

grid-area

Ví dụ: 1 / 3, span 2, 2 / -1. Tên vùng sẽ ghi đè cách đặt theo đường lưới.

Xem trước

Kéo góc dưới của phần xem trước để thay đổi kích thước vùng chứa.

Mã CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Công cụ Liên quan

Xem Tất cả

Tạo CSS Box Shadow Tạo CSS Gradient Tạo CSS Flexbox Tạo Border Radius Tạo Glassmorphism Tạo Neumorphism Tạo Text Shadow Tạo CSS Animation

Tạo CSS Grid là gì?

Trình dựng bố cục CSS Grid cho phép bạn gõ bất kỳ track template nào (ví dụ repeat(auto-fill, minmax(120px, 1fr))), vẽ các vùng đặt tên, đặt gap và căn chỉnh, và đặt từng phần tử theo số đường lưới, span hoặc tên vùng. Phần xem trước trực tiếp dùng mã CSS được tạo.

Cách sử dụng Tạo CSS Grid

Bắt đầu từ một mẫu có sẵn (3 cột, Thẻ responsive, Bố cục Holy Grail, Thanh bên, Bento) hoặc gõ grid-template-columns và grid-template-rows.
Tùy chọn viết grid-template-areas: mỗi hàng một dòng, các tên cách nhau bằng dấu cách, dấu chấm cho ô trống.
Đặt row-gap, column-gap, justify-items, align-items và Số phần tử.
Chọn một phần tử và đặt grid-column, grid-row (ví dụ 1 / 3, span 2) hoặc chọn grid-area.
Sao chép mã CSS.

Ví dụ

Đầu vào

grid-template-columns 200px 1fr, row-gap 8px, column-gap 16px; phần tử 2: grid-column 1 / 3, grid-row span 2

Đầu ra

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 16px;
}

.item-2 {
  grid-column: 1 / 3;
  grid-row: span 2;
}

Khi nào nên dùng Tạo CSS Grid

Dùng grid cho bố cục hai chiều: khung trang, dashboard, thư viện ảnh và lưới thẻ. Với một hàng hoặc một cột phần tử co giãn theo nội dung, flexbox thường đơn giản hơn (xem công cụ tạo CSS Flexbox).

Tạo CSS Grid hoạt động như thế nào

Template và giá trị vị trí được kiểm tra bằng chính CSS.supports() của trình duyệt, nên mọi giá trị hợp lệ trong CSS đều được chấp nhận và giá trị không hợp lệ bị đánh dấu. Văn bản vùng được kiểm tra: mọi hàng phải có cùng số ô và mỗi tên phải tạo thành một hình chữ nhật duy nhất. Kết quả gồm display: grid, các template, grid-template-areas với mỗi hàng một chuỗi trong nháy, gap (một giá trị nếu gap hàng và cột bằng nhau, nếu không thì row column) và căn chỉnh chỉ khi khác stretch. Phần tử chỉ nhận rule grid-area hoặc grid-column/grid-row khi được đặt.

Các Trường Hợp Sử Dụng Phổ Biến

Khung trang có header, thanh bên, nội dung chính và footer
Thư viện thẻ responsive với auto-fill và minmax()
Dashboard kiểu bento với ô trải nhiều cột
Bố cục kiểu tạp chí với vùng đặt tên
Bố cục biểu mẫu với cột nhãn và cột ô nhập

Câu Hỏi Thường Gặp

Vì sao công cụ báo vùng của tôi không phải hình chữ nhật?

Trong grid-template-areas, mỗi tên phải chiếm một khối ô hình chữ nhật. Hình chữ L hoặc tên bị tách ra nhiều chỗ là CSS không hợp lệ và toàn bộ thuộc tính sẽ bị bỏ qua.