CSS Grid Template — Build Grid Layouts with grid-template-columns and Rows

CSS Grid’s grid-template-columns and grid-template-rows properties define the structure of a grid layout. They specify how many tracks (columns and rows) the grid has and how wide/tall each track is.

Use the CSS Grid Generator to configure grid templates visually and copy the generated CSS.

The basic syntax

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  /* Three columns: 200px | flexible | 200px */
}

grid-template-columns takes a space-separated list of track sizes:

• Fixed lengths: 200px, 10rem, 50%
• Fractional: 1fr, 2fr, 3fr
• Content-based: auto, min-content, max-content
• Range: minmax(100px, 1fr)

The fr unit

fr (fraction) distributes available space proportionally after fixed tracks are calculated:

grid-template-columns: 1fr 2fr 1fr;
/* Space: [1 part] [2 parts] [1 part] = 4 parts total */
/* Each column gets 25%, 50%, 25% of available width */

grid-template-columns: 300px 1fr;
/* Left column: fixed 300px */
/* Right column: all remaining space */

fr units only apply to available space (after fixed widths and gaps are subtracted). 1fr 1fr in a 1000px container with a 20px gap = two columns of 490px each.

repeat() function

repeat(n, size) creates n tracks of the specified size:

/* Manually: */
grid-template-columns: 1fr 1fr 1fr 1fr;

/* With repeat: */
grid-template-columns: repeat(4, 1fr);

/* Mixed: */
grid-template-columns: 200px repeat(3, 1fr) 200px;
/* 200px | 1fr | 1fr | 1fr | 200px */

/* Repeat a pattern: */
grid-template-columns: repeat(3, 1fr 2fr);
/* 1fr | 2fr | 1fr | 2fr | 1fr | 2fr */

minmax() function

minmax(min, max) sets a range for a track size:

/* Column is at least 200px, grows up to 1fr: */
grid-template-columns: repeat(3, minmax(200px, 1fr));

/* Common pattern for responsive grids: */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

The last example creates as many columns as fit at minimum 280px width, each growing to fill available space. This is the standard responsive card grid pattern.

auto-fill vs auto-fit

Both work with repeat() to create dynamic column counts:

/* auto-fill: create as many tracks as fit, keep empty tracks: */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: create as many tracks as fit, collapse empty tracks: */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

With fewer items than columns:

• auto-fill: keeps empty tracks, items don’t stretch to fill width
• auto-fit: collapses empty tracks, items stretch to fill width

For most card grids, auto-fill is preferred (cards don’t stretch to odd widths when the row isn’t full).

Common grid templates

12-column grid (CSS frameworks style)

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

/* Span 4 of 12 columns: */
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

Holy Grail layout

.layout {
  display: grid;
  grid-template-columns: 240px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 0;
}

.header  { grid-column: 1 / -1; }  /* Full width */
.sidebar { grid-column: 1; }
.main    { grid-column: 2; }
.aside   { grid-column: 3; }
.footer  { grid-column: 1 / -1; }

Responsive card grid

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
/* No media queries needed — columns adjust automatically */

Template areas

Named template areas make layout intent explicit:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr auto;
}

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

Responsive with media queries:

@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

Row height with grid-template-rows

/* Three rows: auto-height, fills container, auto-height */
grid-template-rows: auto 1fr auto;

/* Fixed row heights: */
grid-template-rows: 80px 1fr 60px;

/* Minimum height for rows: */
grid-template-rows: auto minmax(200px, 1fr) auto;

The 1fr row makes the middle section fill available space — essential for sticky headers and footers.

Placing items

Items auto-flow into cells. Override with explicit placement:

.item {
  /* Place in a specific area: */
  grid-column: 2 / 4;   /* Starts column 2, ends at column 4 */
  grid-row: 1 / 3;       /* Rows 1 through 3 */
  
  /* Shorthand: */
  grid-area: 1 / 2 / 3 / 4;  /* row-start / col-start / row-end / col-end */
  
  /* Span: */
  grid-column: span 2;  /* Span 2 columns from wherever auto-placed */
}

Using the CSS Grid Generator

The CSS Grid Generator lets you:

1. Set column and row counts visually
2. Configure each track size (fr, px, auto)
3. Preview the layout with placeholder content
4. Copy the CSS output

It generates the complete grid container CSS including display: grid, grid-template-columns, grid-template-rows, and gap.

Related tools

• CSS Grid Generator — build grid templates visually
• CSS Grid Layout Guide — complete grid reference
• Flexbox Layout — one-dimensional layouts