Trình tạo CSS Grid

Thiết kế bố cục trực quan với Trình tạo CSS Grid

Trình tạo CSS Grid là một công cụ trực quan giúp bạn thiết kế bố cục lưới CSS bằng cách thiết lập số lượng cột, hàng, định nghĩa kích thước của chúng và chỉ định khoảng cách giữa các hàng và cột. Thay vì phải viết mã thủ công, bạn chỉ cần kéo chuột qua các ô lưới để đặt các phần tử vào vị trí mong muốn. Công cụ sẽ tự động tạo ra mã CSS và HTML tương ứng để bạn sao chép và dán trực tiếp vào dự án của mình.

Công cụ này là giải pháp phù hợp cho những ai muốn nhanh chóng tạo mẫu thử nghiệm bố cục CSS grid, trực quan hóa cách các kích thước hàng và cột khác nhau ảnh hưởng đến bố cục, hoặc cần tạo ra mã CSS và HTML cho một cấu trúc lưới mà không muốn tự viết mã.

Các thông số đầu vào và giới hạn thiết lập

Để xây dựng một lưới tùy chỉnh, bạn có thể cấu hình các thông số đầu vào sau:

• Cột: Nhập một số trong khoảng từ 1 đến 12.
• Hàng: Nhập một số trong khoảng từ 1 đến 12.
• Khoảng cách cột: Nhập giá trị trong khoảng từ 0 đến 48px.
• Khoảng cách hàng: Nhập giá trị trong khoảng từ 0 đến 48px.
• Kích thước cột và Kích thước hàng: Bạn có thể nhập bất kỳ giá trị lưới CSS hợp lệ nào cho từng hàng hoặc cột riêng biệt, ví dụ như 1fr, 200px, auto, min-content, hoặc minmax(120px, 1fr). Mỗi hàng hoặc cột (track) đều có một ô nhập kích thước riêng để bạn tự do thiết lập.

Trong quá trình nhập liệu, nếu bạn điền một giá trị không hợp lệ (ví dụ: not-a-grid-track) vào ô kích thước của hàng hoặc cột, trường nhập liệu đó sẽ bị đánh dấu là không hợp lệ. Tuy nhiên, mã CSS đầu ra vẫn sẽ giữ lại giá trị hợp lệ cuối cùng trước đó. Công cụ này hỗ trợ tối đa 16 phần tử trên lưới.

Cách đặt phần tử và quy tắc tạo mã nguồn

Việc sắp xếp các phần tử con trên lưới được thực hiện trực tiếp bằng thao tác kéo chuột qua các ô để đánh dấu một vùng hình chữ nhật. Khi bạn thả chuột, một phần tử con sẽ được tạo ra, trải dài trên các cột và hàng đã chọn.

Các quy tắc xử lý phần tử và mã nguồn đầu ra bao gồm:

• Tạo mã riêng biệt: Mỗi phần tử được vẽ sẽ nhận được một quy tắc grid-column và grid-row riêng trong mã CSS, cùng một thẻ div tương ứng trong mã HTML.
• Chồng lấp phần tử: Các phần tử có thể nằm chồng lên nhau trên lưới. Phần tử nào được vẽ sau sẽ nằm đè lên trên phần tử được vẽ trước.
• Xóa phần tử: Bạn có thể nhấp vào dấu "×" trên một phần tử để xóa nó. Ngoài ra, tùy chọn "Xóa tất cả phần tử" sẽ đưa số lượng phần tử về 0 và làm rỗng khung chứa HTML. Tùy chọn "Thêm phần tử" sẽ tạo ra một phần tử HTML mới.
• Tối ưu hóa mã CSS:
  • Nếu các hàng hoặc cột có cùng kích thước, công cụ sẽ tự động gộp chúng lại bằng hàm repeat() trong mã CSS đầu ra để giữ cho mã ngắn gọn.
  • Mặc dù khoảng cách cột và khoảng cách hàng được thiết lập độc lập, chúng sẽ tự động gộp thành một thuộc tính gap duy nhất trong CSS khi có giá trị bằng nhau.

Mã nguồn đầu ra được chia thành hai phần rõ rệt: mã CSS định nghĩa cho khung chứa lưới cùng từng phần tử con, và mã HTML gồm khung chứa kèm các thẻ div cho mỗi phần tử.

Sử dụng các mẫu bố cục sẵn có

Nếu không muốn xây dựng lưới từ đầu, bạn có thể sử dụng các mẫu thiết kế sẵn (presets) được tích hợp sẵn trong công cụ. Các mẫu này giúp bạn nhanh chóng định hình các cấu trúc giao diện phổ biến bao gồm:

• Thanh bên (Sidebar)
• Đầu trang & Chân trang
• Bộ sưu tập (Gallery): Mẫu này sẽ tự động tạo ra cấu trúc gồm 3 cột, 2 hàng và 3 phần tử.
• Bảng điều khiển (Dashboard)

Bảo mật và quyền riêng tư dữ liệu

Khi sử dụng công cụ này, bạn hoàn toàn có thể yên tâm về vấn đề bảo mật thông tin. Lưới của bạn được xây dựng trực tiếp trong trình duyệt. Không có bất kỳ dữ liệu nào bạn thiết lập trong công cụ được tải lên hệ thống của BroBroGo.

Câu hỏi thường gặ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.