CSS Grid Generator

How to use CSS Grid Generator

Grid lays items out in two dimensions. Columns define horizontal tracks, rows define vertical tracks, and named areas give larger regions a readable shape.

1. Set column and row counts, then use gap for space between tracks. Default columns divide available space equally with minmax(0, 1fr).
2. Optional custom column tracks override the column count. Use space-separated values such as 2fr 1fr or 160px 1fr. Named areas use one line per row; repeat a name to span adjacent cells and use a dot for an empty cell.
3. Enable the mobile media query to choose a max-width breakpoint and a smaller column count. The preview follows the real browser viewport; resize your browser to test that rule.

A practical starting point

A two-column reading layout can keep the article flexible and the sidebar narrower.

.layout { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }

Common mistakes

• Every named-area row must contain the same number of cells, and each name must form one rectangle.
• Named areas describe cells; child elements still need grid-area: name in your own project. The preview assigns the first children to unique area names.

Frequently asked questions