Does it output grid-template-areas?

Yes — the tool emits both grid-template-columns/rows values and a named grid-template-areas layout you can copy together.

Can I mix fixed and fractional columns?

Yes — use px, rem, fr, or minmax() per column. The tool renders a preview so you can see how columns respond to width changes.

Both supported. Toggle the dropdown to insert `repeat(auto-fit, minmax(...))` — useful for responsive card grids.

Tailwind's arbitrary value syntax (`grid-cols-[200px_1fr_200px]`) can express the same grid. The generator has a Tailwind copy mode.

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

cols=1fr_2fr_1fr rows=auto gap=24px

Output

.grid {
  display: grid;
  grid-template-columns: 1fr_2fr_1fr;
  grid-template-rows: auto;
  gap: 24px;
}

Generate grid-template CSS with custom cols, rows, and gap. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

CSS Grid landed in Chrome in March 2017 — the same month in all four major browsers, a rare coordinated release.
Grid's 'subgrid' feature took 6 additional years after Grid itself to reach full browser support (2023) — it allows nested grids to align with their parent's tracks.
CSS Grid was championed by Jen Simmons and Rachel Andrew, whose years of advocacy and demos were instrumental in convincing browser vendors to prioritize implementation.

Does it output grid-template-areas?: Yes — the tool emits both grid-template-columns/rows values and a named grid-template-areas layout you can copy together.
Can I mix fixed and fractional columns?: Yes — use px, rem, fr, or minmax() per column. The tool renders a preview so you can see how columns respond to width changes.
What about auto-fit and auto-fill?: Both supported. Toggle the dropdown to insert `repeat(auto-fit, minmax(...))` — useful for responsive card grids.
Is the output compatible with Tailwind?: Tailwind's arbitrary value syntax (`grid-cols-[200px_1fr_200px]`) can express the same grid. The generator has a Tailwind copy mode.

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

cols=1fr_2fr_1fr rows=auto gap=24px

Output

.grid {
  display: grid;
  grid-template-columns: 1fr_2fr_1fr;
  grid-template-rows: auto;
  gap: 24px;
}

Generate grid-template CSS with custom cols, rows, and gap. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

CSS Grid landed in Chrome in March 2017 — the same month in all four major browsers, a rare coordinated release.
Grid's 'subgrid' feature took 6 additional years after Grid itself to reach full browser support (2023) — it allows nested grids to align with their parent's tracks.
CSS Grid was championed by Jen Simmons and Rachel Andrew, whose years of advocacy and demos were instrumental in convincing browser vendors to prioritize implementation.

Does it output grid-template-areas?: Yes — the tool emits both grid-template-columns/rows values and a named grid-template-areas layout you can copy together.
Can I mix fixed and fractional columns?: Yes — use px, rem, fr, or minmax() per column. The tool renders a preview so you can see how columns respond to width changes.
What about auto-fit and auto-fill?: Both supported. Toggle the dropdown to insert `repeat(auto-fit, minmax(...))` — useful for responsive card grids.
Is the output compatible with Tailwind?: Tailwind's arbitrary value syntax (`grid-cols-[200px_1fr_200px]`) can express the same grid. The generator has a Tailwind copy mode.