CSS Grid Layout Generator (Visual Builder)

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.

Đơn vị fr (fraction)

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.

6 layout phổ biến

• 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.

Tip

• 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.