CSS Grid Layout Builder
Build CSS Grid layouts visually — set columns, rows, gaps, and item placement, then copy production-ready grid-template-columns and grid-template-rows CSS.
About this tool
A visual builder for CSS Grid layouts. Define the number and size of columns and rows, set gaps, and drop items into cells — the preview shows the resulting grid in real time while the tool generates the matching grid-template-columns, grid-template-rows and grid-area declarations.
Example: 3 equal columns with a 24px gap produces grid-template-columns: repeat(3, 1fr); gap: 24px;. Span an item across two cells and the tool emits grid-column: span 2; automatically.
Useful when designing magazine-style layouts, dashboards, or any structure where Flexbox alone isn't enough, and for learning how fr units, minmax() and line-based placement actually behave.
FAQ
What does the fr unit mean? ›
fr stands for "fraction" of the available space in the grid container. grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first.
How is grid different from flexbox? ›
Flexbox is one-dimensional (a single row or column). Grid is two-dimensional: you control both rows and columns simultaneously, which makes it better for complex page layouts. If you need a one-dimensional layout — toolbars, nav bars, rows of cards — try the CSS Flexbox Generator.
Can I make a responsive grid without media queries? ›
Yes. Use auto-fit or auto-fill with minmax, e.g. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). The grid reflows automatically as the container width changes.
What's the difference between this and the CSS Grid Areas Generator? ›
This tool sets columns, rows, gaps, and item placement with sliders and presets, outputting grid-template-columns and grid-template-rows. The CSS Grid Areas Generator lets you paint named regions (header, sidebar, main, footer) on a grid and outputs grid-template-areas with area assignments. Use this builder for uniform grids like photo galleries and card decks; use the Areas Generator when you need a page shell with explicitly named sections.