MicroTool
Submit a Tool
Developer Tools

CSS Grid Generator

CSS Grid lays out a page in two dimensions at once, which makes it far more capable than what came before and considerably harder to hold in your head. This builder lets you drag the layout into shape and reads back the CSS, so you learn which property produced which effect instead of guessing at fr units and line numbers.

Runs entirely in your browser — nothing you paste is uploaded.

Columns (3)
  • 1
  • 2
  • 3
Rows (2)
  • 1
  • 2
16px
16px
Items
  • 1
  • 2

Grid lines are numbered from 1, and they sit between tracks rather than on them — which is why the first column runs from line 1 to line 2.

Preview

1
2
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
}

.item-2 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 2;
}
<div class="grid">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
</div>

How to

How to use the CSS Grid Generator

  1. 1

    Set your columns and rows

    Choose how many tracks you want and how each is sized. An fr unit takes a share of the leftover space, which is what makes a grid responsive without media queries.

  2. 2

    Adjust the gaps

    Row and column gaps can be set separately. Gap replaces the old margin approach and never adds space outside the grid itself.

  3. 3

    Place your items

    Click a cell to place an item, or give it a start line and a span. Items can overlap, which is something the older layout methods could not do.

  4. 4

    Copy the code

    The generated CSS and matching HTML update live. Copy both into your project and the result is exactly what the preview shows.

Examples

CSS Grid Generator examples

A responsive three-column layout

Input
3 columns, 1fr each, 16px gap
Output
grid-template-columns: repeat(3, 1fr); gap: 16px;

Each fr takes an equal share of the space left after the gaps, so the columns stay equal at any width without a single media query.

A sidebar with fluid content

Input
240px sidebar, 1fr content
Output
grid-template-columns: 240px 1fr;

The sidebar is fixed and the content takes whatever remains. Mixing fixed and fractional tracks is where Grid becomes genuinely easier than floats or flexbox.

An item spanning two columns

Input
Item from line 1, span 2
Output
grid-column: 1 / span 2;

Grid lines are numbered from 1, not 0 — the most common source of off-by-one confusion. Spanning is relative to the start line.

Why use it

What the CSS Grid Generator gives you

See the property and its effect together

Every change updates both the preview and the CSS, which teaches the property names far faster than reading a reference.

Real, copyable output

The generated CSS is plain and standard — no framework, no custom class names, nothing to strip out before using it.

Explains fr and minmax

The sizing units that make Grid powerful are also the ones people avoid. Seeing them respond as you drag makes them concrete.

Runs in your browser

No account and no network. The preview is real CSS Grid rendered by your own browser, not a simulation.

Good to know

CSS Grid Generator limitations

  • The preview shows one viewport at a time, so responsive behaviour across breakpoints still needs testing in a real page.
  • Named grid areas are not generated, though they are often clearer than line numbers for a complex layout.
  • Subgrid is not covered, since browser support is still uneven.
  • The generated CSS is unopinionated and may need adapting to your project's conventions.

Summary

CSS Grid Generator in short

  • Grid lines are numbered from 1, which is the usual source of confusion.
  • An fr unit distributes leftover space after fixed tracks and gaps are subtracted.
  • Gap applies only between tracks, never around the outside of the grid.
  • Grid works in two dimensions at once, unlike flexbox.
  • Everything runs in your browser.

FAQ

CSS Grid Generator questions

When should I use Grid instead of flexbox?

Grid when you are arranging things in rows and columns simultaneously — a page layout, a card grid, a form with aligned labels. Flexbox when items flow in a single direction, such as a navigation bar or a row of buttons.

What does the fr unit actually do?

It takes a share of the space remaining after fixed tracks and gaps are accounted for. Three columns of 1fr each get a third of what is left, so they stay equal at any width without percentages that ignore the gaps.

Why does my item start in the wrong column?

Grid lines are numbered from 1, and they refer to the lines between tracks rather than the tracks themselves. The first column sits between line 1 and line 2, so grid-column: 1 / 2 is the first column, not the second.

What is minmax for?

It sets a floor and a ceiling for a track, so minmax(200px, 1fr) gives a column that grows with the space but never shrinks below 200 pixels. Combined with auto-fit it produces a responsive grid with no media queries at all.

Is gap better than using margins?

Yes, and it fixes a long-standing annoyance. Gap applies only between tracks, so there is no stray space around the outside and no need for the negative-margin trick that grid systems used for years.

Can grid items overlap?

Yes. Place two items on the same lines and they occupy the same cells, layered by document order or z-index. That is something neither floats nor flexbox could do without absolute positioning.

How do I make the grid responsive?

Often you need nothing: repeat(auto-fit, minmax(200px, 1fr)) fits as many columns as will fit and wraps the rest. For layout changes at specific widths, wrap a different grid-template-columns in a media query.

What about named grid areas?

They are frequently clearer than line numbers, since the template becomes an ASCII picture of the layout. This generator produces line-based placement, which is more flexible; converting to named areas afterwards is straightforward.

Is CSS Grid safe to use now?

Yes. Every current browser has supported it since 2017, and it is the standard way to build page layouts. Only subgrid still has patchy support, which is why it is not covered here.

Discover

Related developer tools

Flexbox GeneratorBuild flexbox layouts visually and copy the CSS. Shows how justify-content and align-items differ as you change them.CSS FormatterBeautify or minify CSS in your browser. Keeps url() values and content strings intact instead of mangling them.HTML FormatterBeautify or minify HTML in your browser. Preserves pre and textarea content and the meaningful spaces between inline elements.JavaScript FormatterBeautify or minify JavaScript in your browser. The minifier understands strings and regex, so URLs and template literals survive intact.