CSS Grid is a two-dimensional layout system for the web. It lets you lay out items in rows and columns simultaneously, making complex layouts simple to create and maintain.

How do I use the CSS Grid Generator?

Set your column and row counts, define gap sizes, add named areas, paint them onto the grid canvas, then copy the generated CSS and HTML code into your project.

What is grid-template-areas?

grid-template-areas is a CSS property that lets you name regions of a grid container, making the layout readable and easy to rearrange without changing HTML structure.

Yes. The CSS Grid Generator is completely free, requires no signup, and runs entirely in your browser.

CSS Layout Tool

CSS Grid
Generator

Build responsive CSS Grid layouts visually. Define named areas, set columns, rows, gap, alignment — then copy production-ready CSS and HTML instantly. No login, no install, runs in your browser.

grid-template-areas Named regions Responsive columns Live code output One-click copy 4 presets

          display: grid;

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

          gap: 16px;

          grid-template-areas:

            "hero hero aside"

            "main main aside";

Grid Config

Presets

Columns

Rows

Column Template

Row Template

Column Gap

Row Gap

Min Cell Height (px)

Auto Flow

Justify Items

Align Items

Named Areas

click cell to paint · drag to fill · del to erase

Canvas

Select an area

Columns

Rows

Named areas

—

Template

— lines

Live visual preview of your grid

Area	Cells	Span	Quality

Grid analysis

How it works

Four steps to a production grid

Set dimensions

Choose how many columns and rows your grid needs. Adjust the column template, row template, and gap values to match your design system.

Define areas

Add named areas like hero, sidebar, or footer. Each area gets a unique grayscale shade on the canvas.

Paint the grid

Select an area from the palette, then click or drag across grid cells to assign them. The template areas string updates live as you paint.

Copy the code

Copy the generated CSS and HTML with one click, or download the files. Drop them straight into your project — no cleanup required.

Frequently Asked Questions

What is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you define both columns and rows simultaneously. It replaces complicated float and positioning hacks with a clean, declarative syntax understood by all modern browsers.

What does grid-template-areas do?

grid-template-areas lets you name rectangular regions of a grid container. Each child element is then placed into its named area using grid-area, making layouts self-documenting and easy to rearrange.

What is minmax() in CSS Grid?

minmax(min, max) defines a size range for a track. minmax(0, 1fr) is safer than bare 1fr because it prevents overflow when content is wider than the column.

What is the fr unit?

The fr (fraction) unit distributes available space proportionally after fixed-size tracks are placed. 1fr 2fr 1fr gives the middle column twice the space of the sides.

How is CSS Grid different from Flexbox?

Flexbox is one-dimensional — it handles rows or columns independently. CSS Grid is two-dimensional — you control both axes at once. Use Grid for page-level layouts and Flexbox for component-level alignment.

What is auto-flow: dense?

The dense keyword tells the browser to fill in earlier gaps if a smaller item appears later in the source order — great for masonry-style card grids.

Is this tool free to use?

Yes — completely free, no account required. The tool runs entirely in your browser. Nothing is uploaded to a server. Your grid designs stay private.

How do I make a responsive grid?

Use repeat(auto-fill, minmax(240px, 1fr)) as your column template. This creates as many columns as fit, each at least 240px wide, without any media queries.

Container Properties

display	grid \| inline-grid
grid-template-columns	Track definitions for columns
grid-template-rows	Track definitions for rows
grid-template-areas	Named layout regions
gap	row-gap column-gap shorthand
column-gap	Space between columns
row-gap	Space between rows
grid-auto-flow	row \| column \| dense
grid-auto-columns	Size of implicit columns
grid-auto-rows	Size of implicit rows
justify-items	Horizontal cell alignment
align-items	Vertical cell alignment
justify-content	Horizontal grid alignment
align-content	Vertical grid alignment

Item Properties

grid-area	Named area or shorthand position
grid-column	start / end line shorthand
grid-row	start / end line shorthand
grid-column-start	Column line to start at
grid-column-end	Column line to end at
grid-row-start	Row line to start at
grid-row-end	Row line to end at
justify-self	Override item's horizontal alignment
align-self	Override item's vertical alignment
place-self	align-self justify-self shorthand
z-index	Stacking order for overlapping items

Useful Functions & Keywords

repeat(n, size)	Repeats a track size n times
minmax(min,max)	Track size range constraint
fit-content(val)	Clamps track to content width
auto-fill	Fill row with as many tracks as fit
auto-fit	Collapse empty tracks after fill
fr	Fraction of remaining space
span N	Span N tracks from start position
-1 (negative line)	Count from the end of the grid
subgrid	Inherit parent's track lines
masonry	Experimental masonry axis
. (dot)	Empty cell in template-areas

CSS Grid Complete Reference

Basic Grid Setup

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

Named Grid Areas

.container {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main   { grid-area: main; }
.footer { grid-area: footer; }

repeat() Variants

/* Fixed count */
repeat(4, 1fr)

/* Auto fill — as many as fit */
repeat(auto-fill,
  minmax(240px, 1fr))

/* Auto fit — collapses empties */
repeat(auto-fit,
  minmax(200px, 1fr))

/* Mixed track pattern */
repeat(3, 1fr 2fr)

Line-Based Placement

.item {
  /* Start at col 1, end at col 3 */
  grid-column: 1 / 3;

  /* Span 2 rows from row 1 */
  grid-row: 1 / span 2;

  /* From line 2 to last line */
  grid-column: 2 / -1;
}

Alignment Properties

/* Container — aligns all items */
justify-items: start | center
  | end | stretch;
align-items:   start | center
  | end | stretch;

/* Container — aligns grid itself */
justify-content: center | space-between;
align-content:   center | space-between;

/* Individual item override */
justify-self: end;
align-self:   center;

Implicit Tracks

.container {
  /* Set size for auto-created rows */
  grid-auto-rows: minmax(80px, auto);

  /* Set size for auto-created cols */
  grid-auto-columns: 1fr;

  /* Control placement direction */
  grid-auto-flow: row;   /* default */
  grid-auto-flow: column;
  grid-auto-flow: row dense;
}

Subgrid (Modern)

.parent {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);
  gap: 16px;
}

/* Child inherits parent's columns */
.child {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

/* Supported: Chrome 117+,
   Firefox 71+, Safari 16+ */

Common minmax() Patterns

/* Flexible but not smaller than 0 */
minmax(0, 1fr)

/* At least 200px, grows freely */
minmax(200px, 1fr)

/* Fixed min, content-based max */
minmax(100px, auto)

/* Shrinks to nothing, max is set */
minmax(0, 320px)

/* Content-sized column */
minmax(min-content, max-content)

Grid vs Flexbox Decision

Use Grid when…	Use Flex when…
2D layout needed	1D (row or col)
Named areas	Nav links
Page skeleton	Card internals
Fixed tracks	Equal-height cols
Overlapping items	Centering

Responsive — No Media Queries

/* RAM technique
   (Repeat, Auto, Minmax) */
.grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(min(240px, 100%), 1fr)
    );
  gap: 1rem;
}

/* min() ensures it never
   exceeds container width
   on very small screens */

Overlapping Items

/* Both items share the
   same grid cell */
.image {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  z-index: 0;
}

.caption {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  z-index: 1;
  align-self: end;
  padding: 1rem;
  background:
    linear-gradient(transparent,
    rgba(0,0,0,.6));
}

Browser Support (2026)

CSS Grid	99.5%+ global
grid-template-areas	99%+
subgrid	~95%
masonry (grid)	Experimental
gap (shorthand)	99%+

10 CSS Grid Best Practices

01 · Use minmax(0, 1fr) not 1fr

Bare 1fr has an implicit minimum of auto, which can cause overflow when content is wider than the column. minmax(0,1fr) prevents this reliably.

02 · Name your grid lines

You can name column and row lines: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end] — makes line-based placement much more readable.

03 · Prefer gap over margin

gap only applies between tracks — never on the outer edges. This avoids the classic "extra margin on the first/last item" problem that makes Flexbox tricky.

04 · grid-template-areas as documentation

Reading a grid-template-areas value instantly communicates the intended layout — it's self-documenting CSS that designers and developers can both read.

05 · Use auto-fill for dynamic content

When the number of items varies (blog cards, product tiles), repeat(auto-fill, minmax(200px, 1fr)) adapts to any screen without a single media query.

06 · dense for gallery layouts

grid-auto-flow: dense tells the browser to backfill gaps left by spanning items — perfect for image galleries with mixed-size thumbnails.

07 · grid-template shorthand

The grid-template shorthand combines rows, columns, and areas in one declaration — concise but harder to read; use it only in tightly maintained codebases.

08 · Avoid fixed heights on rows

Fixed row heights clip or overflow dynamic content. Prefer minmax(80px, auto) — it sets a minimum but grows to fit content.

09 · Inspect grids in DevTools

Chrome, Firefox, and Safari DevTools all have dedicated Grid inspectors. Click the "grid" badge next to any container to visualize track lines, areas, and gaps directly in the page.

10 · Combine Grid and Flexbox

Use CSS Grid for the macro layout (page skeleton, sections) and Flexbox for micro layout (nav items, card content, button rows). They complement each other perfectly.