CSS Grid Generator

Build CSS Grid layouts visually. Adjust columns, rows, and gaps — then copy the generated CSS.

Click a cell to toggle column span. Blue = spanned.

Generated CSS
Adjust the controls above to build your grid layout.

How to Use the CSS Grid Generator

  1. Choose a grid mode — Explicit Grid for fixed tracks, Auto-fill or Auto-fit for responsive layouts, Named Lines for semantic grids.
  2. Adjust the sliders — set the number of columns and rows, then tweak the gaps.
  3. Edit templates — type custom values like 1fr 2fr 1fr or 200px auto directly into the template inputs.
  4. Click cells to toggle a column span. Spanned cells (shown in purple) get grid-column: span 2.
  5. Copy or download the generated CSS and paste it into your project.

Understanding CSS Grid Layout

CSS Grid is the most powerful layout tool in modern CSS. It lets you divide a container into rows and columns at the same time — something that was impossible without hacks before Grid arrived. Unlike Flexbox, which is one-dimensional (either row or column), CSS Grid is two-dimensional, making it perfect for full page layouts, card grids, and dashboard interfaces.

The Core Properties

  • display: grid — activates grid layout on the container element
  • grid-template-columns — defines the width of each column track
  • grid-template-rows — defines the height of each row track
  • gap (or column-gap / row-gap) — space between tracks
  • grid-column / grid-row — place items across multiple tracks

The fr Unit and repeat()

The fr unit is unique to CSS Grid. It represents a fraction of the free space in the container. repeat(3, 1fr) creates three equal columns. 1fr 2fr creates two columns where the second is twice the width of the first. Combined with minmax(), you can build columns that have a minimum size but grow to fill available space: repeat(auto-fill, minmax(200px, 1fr)) is a classic responsive grid pattern that requires no media queries.

Auto-fill vs Auto-fit

Both modes use repeat() with either auto-fill or auto-fit as the track count. They behave identically when the grid is full. The difference only appears when there are fewer items than columns that would fit. Auto-fill keeps empty column tracks, preserving the grid structure. Auto-fit collapses empty tracks so the remaining items expand to fill the space. For most responsive card grids, auto-fit produces the more intuitive result where items stretch to fill the row.

Named Grid Lines

In complex layouts, you can name grid lines inside the template definitions for more readable placement rules. Instead of grid-column: 1 / 3, you can write grid-column: sidebar-start / content-end. This makes large layout files easier to maintain and the intent of each placement immediately clear. The Named Lines mode in this generator adds semantic line names like [header-start] and [header-end] to your template columns.

Grid vs Flexbox: When to Use Each

A common question is when to use Grid versus Flexbox. The answer is not either/or — they are designed to complement each other. Use CSS Grid for two-dimensional layouts where you need to control both rows and columns: page layouts, image galleries, pricing tables, and dashboard widgets. Use Flexbox for one-dimensional layouts: navigation bars, button groups, form rows, and centering single items. In practice, many components use both — a Grid for the page shell and Flexbox inside individual cards and nav elements.

Browser Support and Fallbacks

CSS Grid has over 97% global browser support and is fully supported in all evergreen browsers. You do not need vendor prefixes for any of the properties generated by this tool. If you must support Internet Explorer 11, you will need to use the older -ms-grid syntax, which has a different property set and does not support fr units or auto-fill. For most projects in 2024 and beyond, IE 11 support is no longer required. Need to test how grid items stretch and align? Try the Flexbox Playground for one-dimensional alignment experiments.

Frequently Asked Questions

CSS Grid is a two-dimensional layout system built into browsers. Unlike Flexbox (which is one-dimensional), CSS Grid lets you control both rows and columns simultaneously, making it ideal for complex page layouts, card grids, and dashboard designs.
Both auto-fill and auto-fit create as many columns as will fit. The difference appears when there are fewer items than columns: auto-fill keeps the empty column tracks (reserving space), while auto-fit collapses them to zero width so items can expand to fill the container.
Use grid-column: span N on a grid item, where N is the number of columns to span. For example, grid-column: span 2 makes the item take up two column tracks. You can also use grid-column: 1 / 3 to explicitly set start and end lines.
The fr unit represents a fraction of the available space in the grid container. For example, grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first. It distributes remaining space after fixed-size columns are accounted for.
CSS Grid is supported in all modern browsers (Chrome, Firefox, Safari, Edge) and has over 97% global browser support. The generated code does not include vendor prefixes because they are no longer needed. If you need to support IE 11, you would need to add the -ms- prefix variants manually.