Thiết kế
Trình tạo CSS Grid
Xây dựng bố cục lưới CSS trực quan.
Các kiểu bố cục có sẵn (10)
Kéo qua các ô để tô một hình chữ nhật hoặc nhấp từng ô. Mọi vùng có tên phải luôn là hình chữ nhật.
Xem trước trực tiếp
Một chiều: Trình tạo CSS Flexbox.
Tạo lưới CSS với các vùng được đặt tên
Vẽ lưới chữ cái cho template-areas, hoặc chọn mẫu có sẵn. Bản xem trước hiển thị mỗi vùng bằng một màu riêng biệt.
Câu hỏi thường gặp
grid-template-areas là gì?
Đây là cách đặt tên các vùng bố cục (header, sidebar, main…) và bố trí phần tử theo tên thay vì số đường lưới. Nhấp vào các ô bên dưới để tô chữ cái vùng — CSS sẽ cập nhật trực tiếp.
Tôi có thể bắt đầu từ preset không?
Có — mười preset bố cục gồm Holy grail, dashboard, magazine và app shell sẽ tải các vùng đã đặt tên chỉ bằng một lần nhấp.
Có gì được tải lên không?
Không. CSS được tạo hoàn toàn trong trình duyệt.
Cập nhật lần cuối: