CSS Grid Generator
Build CSS Grid layouts visually — define rows, columns, gaps, and generate production-ready grid CSS.
About CSS Grid
CSS Grid is a two-dimensional layout system — the most powerful layout tool in CSS. Unlike Flexbox (one-dimensional), Grid handles both rows and columns simultaneously. The fr (fractional unit) distributes available space: 1fr 2fr 1fr gives the middle column twice the space of the others. repeat() reduces repetition: repeat(12, 1fr) creates a 12-column grid.
Grid areas, named lines, auto-placement, and the minmax() function make Grid incredibly flexible. The "Holy Grail" layout (header, sidebar, main content, sidebar, footer) — a historically complex layout — requires just a few lines of Grid CSS. Modern browser support is universal.
FAQ
When should I use Grid vs Flexbox?
Use Grid for two-dimensional layouts where you need control over both rows and columns simultaneously (page layouts, card grids, dashboards). Use Flexbox for one-dimensional layouts — arranging items in a single row or column (navigation bars, button groups, centering content). They complement each other and are often used together.
What does the fr unit mean?
fr (fractional unit) represents a fraction of the available space in the grid container. 1fr 1fr 1fr creates three equal columns. 2fr 1fr makes the first column twice as wide. fr values are calculated after fixed-size columns and gaps are subtracted — it is similar to flex-grow in Flexbox.