Thiết kế / Bố cục
Trình tạo CSS Grid (Công cụ dựng trực quan Grid-Template-Areas)
Thiết lập cột, hàng và khoảng cách, kéo qua các ô để tạo những vùng có tên như header, sidebar và main, rồi sao chép CSS với grid-template-columns, grid-template-rows và grid-template-areas, sẵn sàng để dán.
Trình tạo CSS Grid (Công cụ dựng trực quan Grid-Template-Areas): Kích thước track được ghi lại khi bạn nhập, chẳng hạn như 200px 1fr 1fr; các kích thước lặp lại sẽ được chuyển thành repeat(). Mỗi vùng trở thành một tên trong grid-template-areas, ô trống được biểu thị bằng dấu chấm, đồng thời tạo một quy tắc dùng grid-area để đặt phần tử. Theo yêu cầu của CSS, các vùng phải là hình chữ nhật và không được chồng lên nhau; bố cục được ghi nhớ trong trình duyệt này. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.
- Danh mục
- Công cụ lập trình viên
- Lượt chạy
- Trong trình duyệt của bạn
- Chi phí
- Miễn phí · không cần đăng ký
- Trạng thái khả dụng
- Sẵn sàng sử dụng
Chạy hoàn toàn trong trình duyệt của bạn
Kéo qua các ô để tạo một vùng; vùng này có thể trải rộng qua nhiều hàng và cột. Nhập kích thước track như 1fr, 200px, auto hoặc minmax(100px, 1fr).
CSS
.grid {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Gán lớp của vùng tương ứng cho từng phần tử con. Các ô hiển thị dấu chấm sẽ để trống.
Các vùng được đặt tên
Mỗi chuỗi trong grid-template-areas là một hàng, và mỗi từ là một ô: "header header" "sidebar main" đặt header trải rộng trên cả hai cột. Một phần tử con có grid-area: main sẽ lấp đầy mọi ô được đặt tên là main. Tên không cần trùng với tên class, nhưng giữ chúng giống nhau sẽ giúp CSS dễ đọc hơn.
Kích thước track thường dùng
minmax(200px, 1fr) giữ cho một cột rộng ít nhất 200 px nhưng vẫn cho phép cột mở rộng; auto vừa với nội dung; repeat(auto-fill, minmax(12rem, 1fr)) tạo ra nhiều cột nhất có thể vừa, một mẫu thường dùng cho lưới thẻ. Có thể tạo khoảng cách linh hoạt bằng trình tạo CSS clamp.
Cách sử dụng
- Chọn số cột và hàng, rồi nhập kích thước của chúng.
- Kéo qua các ô để tạo vùng và đổi tên chúng.
- Sao chép CSS và gán class của vùng tương ứng cho từng phần tử con.
Quyền riêng tư và giới hạn
Bố cục được xây dựng trong trình duyệt của bạn.
Công cụ liên quan
Câu hỏi thường gặp
fr có nghĩa là gì?
Một phần của không gian trống: 1fr 2fr khiến cột thứ hai rộng gấp đôi cột thứ nhất, sau khi trừ các kích thước cố định và khoảng cách.
Tại sao các vùng không thể chồng lên nhau hoặc có hình chữ L?
grid-template-areas chỉ chấp nhận các hình chữ nhật và mỗi tên chỉ được dùng một lần. Các phần tử chồng lên nhau vẫn có thể được tạo trong CSS Grid, nhưng cần dùng số thứ tự đường lưới thay vì các vùng có tên.
Làm cách nào để bố cục thích ứng với nhiều kích thước màn hình?
Dùng CSS được tạo cho bố cục rộng, rồi định nghĩa lại grid-template-columns và grid-template-areas bên trong một media query cho màn hình hẹp.
Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản