Trình tạo CSS Grid
Thiết lập các cột và hàng, kéo chuột qua các ô để đặt phần tử và sao chép mã CSS kèm HTML tương ứng chỉ với một cú nhấp chuột.
Lưới của bạn được xây dựng trực tiếp trong trình duyệt. Không có dữ liệu nào bạn thiết lập được tải lên BroBroGo.
Hỏi đáp
Làm cách nào để đặt các phần tử lên lưới?
Nhấn và kéo chuột qua các ô lưới để đánh dấu một vùng hình chữ nhật — khi bạn thả tay ra, nó sẽ trở thành một phần tử con được đặt vào vị trí, trải dài trên các cột và hàng đó. Mỗi phần tử bạn vẽ sẽ nhận được quy tắc grid-column và grid-row riêng trong mã CSS và một thẻ div tương ứng trong mã HTML. Các phần tử có thể chồng lên nhau, và phần tử được vẽ sau sẽ nằm trên cùng; sử dụng dấu × trên phần tử để xóa nó.
Các cột và hàng có thể có kích thước khác nhau không?
Có. Mỗi hàng/cột (track) đều có ô nhập kích thước riêng và bạn có thể nhập bất kỳ giá trị lưới hợp lệ nào ở đó — 1fr, 200px, auto, min-content hoặc minmax(120px, 1fr). Các hàng hoặc cột có cùng kích thước sẽ được gộp lại bằng hàm repeat() để giữ cho mã đầu ra ngắn gọn. Khoảng cách cột (column gap) và khoảng cách hàng (row gap) được thiết lập riêng biệt và sẽ tự động gộp thành một thuộc tính gap duy nhất khi chúng có giá trị bằng nhau.
Tôi phải làm gì với mã nguồn được tạo ra?
Sao chép cả mã CSS và HTML bên cạnh nhau. Mã HTML cung cấp cho bạn khung chứa với một thẻ div cho mỗi phần tử, và mã CSS định nghĩa lưới cũng như định vị từng phần tử đó. Dán cả hai vào dự án của bạn và bạn sẽ có được bố cục chính xác như những gì bạn đã vẽ ở đây.