CSS Grid Generator Online

Thiết kế bố cục lưới CSS Grid trực quan và lấy mã CSS.

▶Về công cụ này

Thiết kế bố cục lưới CSS Grid một cách trực quan. Tùy chỉnh số hàng, cột, khoảng cách và lấy mã CSS ngay lập tức.

Giao diện công cụ 

  
 
 
   
 
 

Tại sao nên sử dụng CSS Grid?

 
 
 
Bố cục hai chiều mạnh mẽ
 

Khác với Flexbox chỉ tập trung vào một chiều (hàng hoặc cột), CSS Grid cho phép bạn thiết kế bố cục theo cả hai chiều cùng lúc. Đây là công cụ mạnh mẽ nhất để xây dựng các layout web phức tạp như Dashboard, trang báo chí hay Portfolio.

 
 
 
Đơn vị fr là gì?
 

Đơn vị fr (Fraction) đại diện cho một phần của không gian còn trống trong Grid container. Ví dụ: nếu bạn có 3 cột với tỷ lệ 1fr 1fr 1fr, chúng sẽ tự động chia đều không gian mà bạn không cần phải tính toán phần trăm (%) thủ công.

 
 
 
Trực quan hóa thiết kế
 

Việc viết code Grid tay có thể gây nhầm lẫn. Công cụ này giúp bạn thấy ngay kết quả thay đổi khi điều chỉnh số hàng, cột và khoảng cách (gap), sau đó chỉ cần copy đoạn mã CSS đã tối ưu hóa vào dự án của mình.

 
 
 
 
  
 
 
 
Cách sử dụng
 
     
  1. Chỉnh Rows/Cols
  2. Chỉnh Gap
  3. Sao chép CSS
    4.  
 
 
 
Khi nào nên dùng
 
Khi cần tạo bố cục lưới phức tạp cho website một cách trực quan và nhanh chóng.
 
 
 
Ví dụ
 
Tạo grid 3 cột cho gallery ảnh, grid 2x3 cho dashboard, hoặc grid responsive cho blog layout.