What does the fr unit mean in CSS Grid?

fr stands for a fraction of the space left over after all fixed-size tracks and gaps have been placed. In a 800px container, grid-template-columns: 200px 1fr 1fr results in 200px, 300px, and 300px — the two 1fr tracks split whatever remained.

How do I build a responsive grid without media queries?

Use grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) — it creates as many columns of at least 250px as the container can hold, and the count adjusts automatically as the viewport resizes. No breakpoints required.

How does grid-template-areas work?

It defines the layout as a text map: each quoted string is one row, each word inside it names an area, and a period marks an empty cell. Every named area has to form a rectangle, or the whole declaration is ignored by the browser.

Can I export a CSS Grid layout as Tailwind classes?

Yes — the Tailwind tab converts your setup in real time into classes like grid-cols-3, gap-4, and col-span-2. Custom tracks that don't map to a default scale value become Tailwind's arbitrary-value syntax, such as grid-cols-[200px_1fr_200px].

Why isn't my grid-template-areas layout showing up?

The most common cause is a non-rectangular area — every named area must form a solid rectangle in the text map, or the browser discards the entire declaration and falls back to auto-placement. Check that every row referencing the same area name has the same width and shape.

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

Columns 3

Rows 2

gap 16px

Custom track sizes

grid-template-columns

grid-template-rows

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.

Item count 3

Min track width 160px

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

How to use this CSS Grid generator

From blank grid to production code in under a minute

1. Pick a preset or set your tracks

Holy Grail, Dashboard, Card Grid and four more — or drag the Columns and Rows sliders to start from scratch.

2. Adjust item spans or named areas

Spans mode: click an item on the canvas to set its col-span/row-span. Areas mode: type names straight into the matrix and watch the layout update live.

3. Copy the code

Grab Tailwind classes, plain CSS, full HTML, or the Responsive tab — mobile-first media queries generated automatically from your setup.

What this CSS grid layout generator does

Dual code output plus a visual editor for named areas

CSS and Tailwind side by side

Something most grid generators don't offer on the same screen — flip between class-based and property-based output instantly.

grid-template-areas editor

Type area names directly into the matrix and the preview rearranges itself in real time — no memorizing the string-map syntax.

Auto-fill vs auto-fit lab

The single most confusing part of CSS Grid, made concrete with a live, draggable demo instead of a paragraph of explanation.

Responsive tab

Generates mobile-first media queries automatically from whatever layout you built — no manual breakpoint writing afterward.

Examples

What a few common setups produce

Configuration

Generated CSS

3 columns, 2 rows, 16px gap

grid-template-columns: repeat(3, 1fr); gap: 16px

Item with col-span 2

.item-1 { grid-column: span 2; }

Custom tracks

grid-template-columns: 200px 1fr minmax(150px, 1fr)

Empty cell in named areas

grid-template-areas: "header header" ". main"

When you'll reach for this tool

The most common scenarios among people who use it

Page layouts (Holy Grail)

Header, footer, and three columns in between — the preset generates the whole structure in one click.

Admin dashboards

A fixed sidebar plus flexible content areas — named areas keep the CSS readable as the layout grows more complex.

Product or card galleries

auto-fill combined with minmax builds a gallery that reflows from 4 columns down to 1 without writing a single breakpoint.

Tailwind projects

The Tailwind tab outputs grid-cols-*, col-span-*, and arbitrary values ready to paste into React, Vue, or Svelte components.

Common CSS Grid mistakes

Non-rectangular named areas

An L-shaped area silently invalidates the entire grid-template-areas declaration and the browser falls back to automatic placement with no console warning.

Confusing fr with %

1fr is a fraction of the leftover space after fixed tracks and gaps are accounted for; % is a fraction of the total container width — mixing the two with gap causes overflow.

A span larger than the track count

col-span-4 on a 3-column grid doesn't clip — it forces the browser to create an implicit fourth column, which shifts everything after it.

Why use this CSS grid generator

The visual grid-template-areas editor and the auto-fill vs auto-fit lab turn the two parts of CSS Grid that confuse developers most into something you can see and click through instead of memorize.

The Responsive tab writes mobile-first media queries for you the moment you finish arranging a layout — one less manual step between prototyping and shipping.

auto-fill vs. auto-fit

The most common point of confusion in CSS Grid

auto-fill

auto-fit

Empty tracks

kept

collapsed

Existing items

stay a consistent size

stretch to fill the leftover space

Use it when

item size consistency matters

the row should always feel full-width

Frequently asked questions

Both create as many tracks as will fit using repeat(). When the items don't fill the whole row, auto-fill keeps the leftover tracks empty, while auto-fit collapses those empty tracks to zero width and stretches the existing items to fill the space. They behave identically when there are enough items to fill every track.

References

MDN — CSS Grid Layout

The definitive reference for every Grid property, with browser compatibility notes.

CSS-Tricks — A Complete Guide to Grid

The most widely used visual cheatsheet for container and item properties.

web.dev — Learn CSS: Grid

Google's interactive course covering tracks, areas, and auto-placement in depth.