Xem trước
1
2
3
4
5
6
7
8
9
CSS Grid Generator giúp bạn tạo và visualize CSS Grid layout. Chọn số cột, hàng, gap và các thuộc tính alignment rồi copy CSS để triển khai ngay.
Grid phức tạp hóa đơn giản
Visualize grid structure trước khi code giúp tránh sai sót và tiết kiệm debug time.
Học Grid dễ hơn
Thay đổi thuộc tính và xem ngay kết quả giúp hiểu CSS Grid sâu hơn.
Template columns/rows
Tạo grid-template-columns và rows với fr units, minmax, auto-fill.
Export CSS ngay
Copy CSS grid container hoàn chỉnh để dùng trong dự án.
01
Chọn số cột & hàng
Điều chỉnh số columns và rows cho grid container.
02
Chỉnh column-gap & row-gap
Khoảng cách giữa các cột và hàng trong grid.
03
Chọn justify & align
Căn chỉnh grid items theo cả hai trục.
04
Copy CSS
Copy CSS grid-template và các thuộc tính để dùng ngay.
grid-template-columns
Định nghĩa số cột và kích thước: repeat(3, 1fr), auto, minmax(200px, 1fr).
grid-template-rows
Định nghĩa số hàng và kích thước, hoặc để auto cho grid tự tính.
gap
column-gap và row-gap — khoảng cách giữa các grid tracks.
justify-items
Căn chỉnh grid items theo trục inline (ngang).
align-items
Căn chỉnh grid items theo trục block (dọc).
Frontend Developer
Tạo layout grid phức tạp nhanh chóng mà không cần nhớ hết syntax.
UI Designer
Hiểu cách CSS Grid hoạt động để design layout khả thi hơn.
Học viên
Thực hành CSS Grid một cách trực quan và hiệu quả.