CSS Grid Generator

CSS Grid Generator

Free CSS Grid generator: live preview, Tailwind & CSS dual output, grid-template-areas visual editor, auto-fill vs auto-fit demo, 7 presets. No signup.

Updated June 2026

Quick Presets
Layout Configuration
Mode
3
2
16px
Custom track sizes
justify-items stretch
align-items stretch
Interactive Canvas
6/12
Code Output 
<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
Item

Click an item in the canvas to edit its column and row spans.

Auto-fill vs Auto-fit Lab

auto-fill creates as many tracks as possible and keeps the empty ones — auto-fit collapses empty tracks so items stretch to fill the row. Drag the slider to see the difference.

3
160px
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
1
2
3

CSS Grid Generator — Visual Builder with Tailwind & CSS Output

Build any CSS Grid layout visually — adjust columns, rows, gaps, and item spans and watch the grid update in real time. This CSS grid generator exports your layout as vanilla CSS and Tailwind classes simultaneously, something no other grid tool offers. Start from a preset (Holy Grail, Dashboard, Card Grid) or build from scratch.

Beyond the basics, you get a visual grid-template-areas editor for named layouts, responsive breakpoints with mobile-first media queries, and an interactive auto-fill vs auto-fit lab that finally makes the most confusing part of CSS Grid click.

How to Use the CSS Grid Generator

Going from a blank grid to production-ready code takes under a minute:

  1. Pick a preset or set your tracks — click Holy Grail, Dashboard, Card Grid, Magazine, Mosaic, App Shell, or 12-Column, or drag the Columns and Rows sliders. The interactive canvas updates instantly.
  2. Shape your items — in Item Spans mode, click any item in the canvas and adjust its col-span, row-span, and start position. In Named Areas mode, type area names (header, sidebar, main) directly into the editor matrix and the layout rearranges live.
  3. Fine-tune the tracks — type custom track sizes like 200px 1fr minmax(150px, 1fr) to mix fixed and flexible columns; the canvas and the code reflect every change.
  4. Copy the code — switch between the Tailwind, CSS, HTML, and Responsive tabs and hit Copy (or press Shift+Enter). The Responsive tab outputs mobile-first media queries automatically.

CSS Grid Generator Examples

A few real configurations and the exact code the generator produces:

Example — 3-column card grid:

Config:  3 columns, 2 rows, gap 16px
CSS:     display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
Tailwind: grid grid-cols-3 grid-rows-2 gap-4

Example — Holy Grail layout (named areas):

Config:  columns 200px 1fr 200px, areas "header header header" / "sidebar main aside" / "footer footer footer"
CSS:     grid-template-areas: "header header header" "sidebar main aside" "footer footer footer";
         .header { grid-area: header; } …

Example — item spanning 2 columns:

Config:  item 1 with col-span 2
CSS:     .item-1 { grid-column: span 2; }
Tailwind: <div class="col-span-2">1</div>

Example — custom tracks with minmax (edge case):

Config:  grid-template-columns: 200px 1fr minmax(150px, 1fr)
Tailwind: grid-cols-[200px_1fr_minmax(150px,1fr)]   ← arbitrary value, generated automatically

Example — empty cells in named areas (edge case):

Config:  leave a cell blank in the areas editor
Output:  grid-template-areas: "header header" ". main"   ← the dot is a valid empty cell

CSS Grid — What It Is and Why It Matters

CSS Grid Layout is a two-dimensional layout system that controls columns and rows simultaneously. Unlike Flexbox, which is one-dimensional (a single row OR column), Grid lets you place items on both axes at once — making it ideal for page-level layouts, dashboards, card grids, and any UI where elements must align horizontally and vertically.

The fr unit is Grid's superpower: it represents a fraction of the remaining space after fixed tracks are placed. grid-template-columns: 200px 1fr 1fr in an 800px container gives you a 200px sidebar and two 300px columns — no percentage math, no rounding errors. Combined with minmax() and repeat(auto-fill, …), you can build fully responsive grids without writing a single media query.

Common Use Cases

  • Page layouts (Holy Grail): header, footer, and a three-column middle section in six lines of CSS — a layout that used to require float hacks. The Holy Grail preset generates it instantly.
  • Dashboards: a fixed sidebar plus a flexible content area with stats and widget zones. Named areas keep the CSS readable as the dashboard grows.
  • Product/card galleries: repeat(auto-fill, minmax(250px, 1fr)) creates a gallery that reflows from 4 columns to 1 as the viewport shrinks — zero breakpoints needed.
  • Tailwind projects: the Tailwind tab outputs grid-cols-*, col-span-*, and arbitrary values like grid-cols-[200px_1fr], so you can paste the markup straight into a React, Vue, or Svelte component.
  • Magazine/editorial layouts: mix a full-width hero with asymmetric article columns using the Magazine preset, then tweak spans per block.

Common Mistakes with CSS Grid

  • Using auto-fit when you wanted auto-fill: with few items, auto-fit stretches them across the full row, which can make a single card span the entire container. Use the lab below the canvas to compare both before committing.
  • Non-rectangular named areas: grid-template-areas requires every area to form a rectangle. An L-shaped area silently invalidates the whole template and the browser falls back to auto-placement.
  • Confusing fr with %: 1fr is a share of the leftover space, while 33% is a share of the total container — mixing percentages with a gap causes overflow, while fr accounts for gaps automatically.
  • Spans larger than the track count: an item with col-span-4 in a 3-column grid forces an implicit fourth column. The generator caps spans at your column count in the preview to make this visible.

Frequently Asked Questions

What is the difference between auto-fill and auto-fit in CSS Grid?

Both create as many tracks as fit the container when used with repeat(). They differ when items don't fill the row: auto-fill keeps the empty tracks, maintaining consistent track sizes, while auto-fit collapses empty tracks to zero so the existing items stretch to fill the space. Use auto-fit for galleries that should always fill the width; use auto-fill when consistent column sizes matter more.

What is the fr unit in CSS Grid?

The fr (fraction) unit represents a fraction of the available space after fixed-size tracks are placed. For example, grid-template-columns: 200px 1fr 1fr in an 800px container yields 200px, 300px, and 300px. Unlike percentages, fr operates on remaining space and accounts for gaps, making it more reliable when mixing fixed and flexible tracks.

How do I make a responsive grid without media queries?

Use grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). This creates as many 250px-minimum columns as fit the container and adjusts the count automatically as the viewport changes — 4 columns on desktop, 2 on tablet, 1 on mobile, with zero media queries. The auto-fill vs auto-fit lab in this generator lets you test the pattern live.

How does grid-template-areas work?

It defines your layout as a visual text map: each quoted string is a row, each word is a named area, and a dot (.) marks an empty cell. Assign elements with grid-area: name. The constraint is that every area must be rectangular — repeat the name across cells to make an area span columns or rows. The Named Areas mode in this generator builds the template for you as you type names into cells.

Can I export the grid as Tailwind classes?

Yes — the Tailwind tab converts your configuration to utility classes in real time: grid-cols-3, gap-4, col-span-2, and so on. Custom track sizes become arbitrary values like grid-cols-[200px_1fr_200px], and named areas are emitted using Tailwind's arbitrary property syntax ([grid-area:header]), so even complex layouts work without touching your Tailwind config.

Resources

Related Tools