CSS Grid Generator

Build CSS Grid layouts visually and copy clean CSS and HTML

Layout

Items fill the grid in source order.

Column sizes

Column 1
Column 2
Column 3

Row sizes

Row 1
Row 2

Preview

Output

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 16px;
}

Options

16px
16px

Selected item

Select an item in the preview to set its column and row span.

Advanced

0 leaves min-height unset. Rows sized in fr need a height to fill.

Preview and code update as you edit.

Related Tools

CSS Flexbox GeneratorBuild Flexbox layouts visually and copy CSS, HTML or TailwindGradient GeneratorBrowse curated CSS gradients or build linear, radial, and conic onesCSS Beautifier & MinifierFormat, optimize, and minify CSS codeHTML CSS JS PlaygroundWrite frontend code, run it safely, and debug the result in your browser.
What is the CSS Grid Generator?

A visual builder for CSS Grid layouts. Set column and row sizes with fr, px, %, auto, minmax() or a validated custom value, paint named areas, or build a responsive auto-fit card grid. The preview is a real CSS Grid container driven by the same declarations as the generated code, so what you see is what you copy.

How to use it
  1. 1.Pick a mode: Tracks, Named Areas or Responsive, or load a preset.
  2. 2.Set the column and row sizes, gaps and alignment.
  3. 3.In Tracks, click an item in the preview to give it a column or row span.
  4. 4.In Named Areas, type a name and click cells to paint each area.
  5. 5.Copy or download the CSS or the standalone HTML page.
Named areas and validation

Every named area must form one filled rectangle, otherwise browsers ignore the whole grid-template-areas declaration. The builder explains which area breaks the rule and keeps the last valid layout in the preview and code until you fix it. Custom track sizes are checked before they are applied.

Limits

Up to 12 columns, 12 rows and 48 items. Custom sizes accept lengths, percentages, fr, auto, min-content, max-content, minmax() and fit-content(); calc(), var(), line names and repeat() inside a single track are not accepted. Layouts are saved only in this browser.

CodingTool is officially live on

Launched on StartupBaseCodingTool.dev - Free, Fast & Easy Developer Tools in One Place | Product HuntCodingTool - Featured on Startup FameFazier badgeListed on Turbo0Featured on Twelve ToolsFeatured on Findly.toolsLaunchpadly Startup DirectoryCodingTool.dev — Featured on Smol Launch