Generator Tools

CSS Grid Generator

Build CSS Grid layouts visually with adjustable columns, rows, gaps, and item placement. Copy production-ready CSS, HTML, and Tailwind classes.

Quick presets

Live preview

Height320px

Click any item in the preview to edit its individual placement.

Container properties

Apply to the parent element with display: grid.

grid-template-columns

3 / 8

Define each column track. Use fr for flexible columns.

#11fr
#21fr
#31fr

grid-template-rows

2 / 8

Define each row track. Use px for fixed height, fr to share remaining height.

#1120px
#2120px

row-gap12px

column-gap12px

justify-itemsInline-axis alignment of items inside their cell

align-itemsBlock-axis alignment of items inside their cell

justify-contentDistribution of the entire grid along the inline axis

align-contentDistribution of the entire grid along the block axis

Items

Add up to 12 items, then click an item in the preview or the chip below to set its column and row placement.

6 / 12

grid-column-startauto

Auto-place when 0; otherwise the starting column line

column span1

How many columns this item covers

grid-row-startauto

Auto-place when 0; otherwise the starting row line

row span1

How many rows this item covers

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 120px 120px;
  gap: 12px;
}

Per-item rules are emitted only when an item has an explicit start or a span greater than one.

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

Tailwind v3+

grid grid-cols-[1fr_1fr_1fr] grid-rows-[120px_120px] gap-[12px]

Tailwind output covers the container only. Per-item placements need their own utility classes (col-start, col-span, row-start, row-span).

Full snippet

How to use

Click a quick preset (12-column grid, Holy Grail, Sidebar plus main, Card grid, Feature spotlight, or Mosaic) to seed a real layout, or start from the default three-column grid.
Edit grid-template-columns and grid-template-rows track by track. Pick fr for flexible tracks, px or percent for fixed sizes, or auto, min-content, or max-content for content-driven tracks.
Slide row-gap and column-gap to set the spacing between cells, then pick justify-items, align-items, justify-content, and align-content from the dropdowns.
Click any tile in the live preview, or any Item chip, then set its grid-column-start, column span, grid-row-start, and row span to place it precisely on the grid.
Copy the generated CSS, HTML, Tailwind class, or full snippet using the buttons in the output panel.

About this tool

CSS Grid Generator is a visual builder for the CSS Grid Layout Module. It lets you compose grid-template-columns and grid-template-rows track by track, picking units that match the job: fr for shares of free space, px and percent for fixed and proportional sizes, and auto, min-content, and max-content for content-driven tracks. Independent column-gap and row-gap sliders feed straight into the live preview, and the four alignment properties (justify-items, align-items, justify-content, align-content) are exposed with named options so you can see how each value redistributes the cells. Each item supports an explicit start line and span on both axes, so you can build mosaics, holy-grail layouts, sidebars, hero spans, and overlapping tiles without writing the placement by hand. The preview is a real CSS Grid container styled with the exact strings the tool will copy, so what you see is what you ship. The output panel emits a clean .container rule with grid-template-columns, grid-template-rows, gap (or row-gap and column-gap when they differ), and any non-default alignment, plus per-item :nth-child rules for items that have an explicit start or a span greater than one. A Tailwind v3+ class equivalent is generated alongside the CSS, using arbitrary values in square brackets for the track lists so it compiles into the same layout under JIT. Quick presets cover six common patterns (12-column grid, holy grail, sidebar plus main, card grid, feature spotlight, mosaic), each one resetting the columns, rows, gaps, and item placements to a real-world example you can tweak in place. Useful for prototyping marketing pages, dashboard tiles, photo galleries, app shells, blog index grids, and any layout where flexbox would force you to fight the cross axis. Everything runs locally on your device, so the layouts and product names you experiment with here never leave the browser.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Grid Generator

How to use

About this tool

You may also like

CSS Flexbox Generator

CSS Clamp Generator

CSS Gradient Generator

CSS Box Shadow Generator