CSS Grid generator

How to use the CSS Grid generator

  1. Drag the columns and rows sliders to set up your grid track count. Start with 3 columns × 2 rows for a typical card layout.
  2. Click inside any cell to select an area, then drag the handles to span multiple tracks — creates grid-column: span N and grid-row: span N.
  3. Adjust gap, justify-items, and align-items in the right panel. The preview updates live.
  4. Switch to subgrid mode if you need nested grids to inherit the parent track sizes.
  5. Copy the generated CSS — the output includes the container rules and named grid areas for each cell.

When to use it

Use Grid when you're laying out a two-dimensional structure with explicit rows and columns — dashboards, card galleries, magazine layouts. Use Flexbox when you're arranging items in a single row or column and want them to flow naturally. Most real layouts combine both: Grid for the page skeleton, Flexbox inside each grid cell. Alternative: cssgrid-generator.netlify.app covers the basics but lacks subgrid and named area support.

Example

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 200px;
  gap: 1rem;
  grid-template-areas:
    "header header header"
    "sidebar main main";
}

.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

Three-column layout with a full-width header and a sidebar+main split below.

Frequently asked questions

When should I use fr vs px vs %?
Use fr for flexible tracks that share remaining space. Use px when you need a fixed sidebar or header. Use % rarely — it's usually what you don't want because gaps aren't subtracted.
Does subgrid work in Safari?
Yes — subgrid shipped in Safari 16 (September 2022). All major browsers now support it.
Can I animate grid tracks?
Partially. grid-template-columns and grid-template-rows are animatable in modern browsers, but grid-template-areas is not. For entrance animations, animate child properties like opacity and transform.
How do I center one item in the grid?
Set place-items: center on the container to center every child in its track, or place-self: center on a single child.
Why does my content overflow the grid cell?
By default, grid items have min-width: auto which equals their intrinsic content size. Add min-width: 0 to the child to let it shrink.

Related tools

Last updated: 2026-04-22