🎚

CSS Grid Layout Generator (Visual Builder)

Visual builder cho CSS Grid Layout. 6 preset (Holy Grail, Magazine, Auto-fit responsive…). Live preview + copy CSS sẵn dùng.

Layout mẫu

Template cột (grid-template-columns)

Template hàng (grid-template-rows)

Gap: 12px

fr = phần. 1fr 2fr = chia 1:2. repeat(3, 1fr) = 3 cột bằng nhau. minmax(200px, 1fr) = ít nhất 200px.

Xem trước

CSS

CSS Grid Layout — chuẩn modern cho UI 2D. Hỗ trợ tốt từ 2017. Dùng fr cho responsive, auto-fit/auto-fill cho grid tự xếp.

CSS Grid vs Flexbox

Flexbox: 1 chiều — hoặc row, hoặc column. Tốt cho navbar, list of buttons, card row.
CSS Grid: 2 chiều — row + column cùng lúc. Tốt cho page layout, dashboard, gallery, magazine.
Modern site thường dùng CẢ HAI: Grid cho macro layout, Flexbox cho micro components.

fr = phần dư của không gian sau khi trừ các kích thước cố định:

1fr 1fr = 2 cột bằng nhau (50/50).
1fr 2fr = chia 1:2 (33%/67%).
200px 1fr = sidebar 200px, main fill phần còn lại.
repeat(3, 1fr) = 3 cột đều nhau (shortcut).
repeat(auto-fit, minmax(200px, 1fr)) = responsive — số cột tự đổi theo screen size.

3 cột bằng nhau: feature grid, card row.
Sidebar + Main: dashboard, doc site (sidebar nav 240px, content 1fr).
Holy Grail: header / sidebar-main-aside / footer — layout cổ điển nhất web.
Magazine 4 cột: blog index, news site.
Auto-fit responsive: auto-fit + minmax — tự collapse từ 4 cột → 2 cột → 1 cột theo viewport.
Masonry: Pinterest-style. Note: grid-template-rows: masonry mới được Firefox support, Chrome đang prepare.

gap > margin: dùng gap: 16px cho khoảng cách giữa cells, không cần margin trên child.
grid-area: đặt tên area để readable. grid-template-areas: "header header" "sidebar main".
Responsive: thay vì media query, dùng auto-fit + minmax cho grid tự responsive.