Cách dùng Trình tạo CSS Grid
- Đặt số cột và hàng cùng khoảng cách — hoặc bắt đầu từ một mẫu có sẵn như Holy grail.
- Chỉnh kích thước track (phía trên lưới cho cột, bên trái cho hàng):
1fr,240px,auto,minmax(0, 1fr). - Kéo qua các ô để tạo một vùng và đặt tên cho nó, ví dụ
headerhoặcsidebar. - Sao chép CSS và khung HTML vào dự án của bạn.
Vùng grid (grid areas) trong một đoạn ngắn
grid-template-areas cho phép bạn vẽ bố cục bằng tên: mỗi chuỗi là một hàng, mỗi từ là một cột, còn dấu chấm (.) nghĩa là ô trống. Các phần tử con được đặt bằng grid-area: name, nên đoạn CSS đọc lên giống như hình ảnh của trang.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar main";
}Kích thước track
| Giá trị | Ý nghĩa |
|---|---|
1fr | một phần của khoảng trống còn lại |
minmax(0, 1fr) | giống 1fr, nhưng nội dung dài không thể làm cột giãn ra |
auto | vừa đúng với nội dung |
240px, 20rem | kích thước cố định |
repeat(auto-fill, minmax(200px, 1fr)) | số cột vừa khít với không gian — rất hợp cho lưới thẻ |
Vùng phải có dạng hình chữ nhật — công cụ chỉ cho phép vẽ hình chữ nhật, nên CSS luôn hợp lệ. Với một hàng hoặc một cột phần tử đơn giản, flexbox thường gọn hơn. Liên quan: Máy tính clamp, Định dạng CSS.
Cũng được tìm dưới tên: tạo css grid, css grid generator, công cụ tạo grid layout, grid-template-areas là gì, tạo layout css grid online, css grid template, bố cục css grid, trình tạo css grid online.
Các công cụ dùng kèm tốt với Trình tạo CSS Grid
- Trình tạo CSS Flexbox — Xem rõ từng thuộc tính flexbox hoạt động thế nào: chọn hướng, cách xuống dòng, justify-content, align-items và khoảng cách, thêm hoặc xóa phần tử, rồi nhấp vào từng phần tử để chỉnh flex-grow, shrink, basis, order và align-self.
- Trình tạo Border Radius — Bo tròn các góc của bất kỳ khung nào: kéo một thanh trượt cho tất cả các góc hoặc đặt từng góc riêng, chuyển sang góc elliptical để tạo hình blob và lá, rồi sao chép đoạn CSS border-radius ngắn gọn và hợp lệ nhất.
- Tạo Box Shadow CSS — Xếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao chép CSS box-shadow hoặc text-shadow.
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
Câu hỏi thường gặp
Làm thế nào để tạo layout CSS grid?
Đặt số cột và hàng, kéo qua các ô để định nghĩa các vùng có tên (header, sidebar, main…), rồi sao chép CSS grid-template-columns, grid-template-rows và grid-template-areas được tạo ra cùng với HTML.
Sự khác nhau giữa 1fr và minmax(0, 1fr) là gì?
1fr có kích thước tối thiểu bằng nội dung bên trong, nên một từ dài hoặc ảnh rộng có thể làm cột phình to. minmax(0, 1fr) cho phép cột co lại nhỏ hơn nội dung, giúp các cột luôn bằng nhau.
Tại sao vùng grid phải là hình chữ nhật?
Đặc tả CSS Grid chỉ cho phép các vùng có tên dạng hình chữ nhật; một vùng hình chữ L sẽ làm toàn bộ khai báo grid-template-areas bị lỗi.
Làm sao để grid responsive?
Thêm media query để định nghĩa lại grid-template-columns và grid-template-areas cho màn hình nhỏ — ví dụ một cột duy nhất với "header" "main" "sidebar".
Tôi có thể cài Trình tạo CSS Grid như một ứng dụng web và dùng khi không có mạng không?
Có. Trình tạo CSS Grid là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.