CSS Grid Cheat Sheet | Gridlock Holmes

Reference

CSS Grid container properties

Apply display:grid to any element to activate it as a grid container and unlock all grid properties.

Property	Values	Description
display	grid or inline-grid	Activates the grid formatting context. All direct children become grid items.
grid-template-columns	1fr 2fr, repeat(3, 1fr), repeat(auto-fill, minmax(200px, 1fr)), 200px 1fr	Defines column track sizes. fr divides remaining space after gaps.
grid-template-rows	auto, 100px 1fr, repeat(3, 200px)	Defines row track sizes. auto lets content determine the height.
grid-template-areas	Named area strings in quotes, one per row. Use . for empty cells.	Defines named template regions assigned to items via grid-area.
grid-template	-	Shorthand combining grid-template-rows / grid-template-columns. Rarely used alone – prefer the longhand properties for clarity.
column-gap / row-gap	Any length value (px, rem, %)	Sets the gutter between columns and rows. Replaces the deprecated grid-column-gap and grid-row-gap.
gap	row-gap column-gap, or a single value for both	Shorthand. gap: 1rem sets equal gaps. gap: 1rem 2rem sets rows then columns.
justify-items	start \| end \| center \| stretch (default)	Aligns grid items along the inline (horizontal) axis inside their cell.
align-items	start \| end \| center \| stretch (default) \| baseline	Aligns grid items along the block (vertical) axis inside their cell.
place-items	align-items justify-items	Shorthand. place-items: center centers items in both axes. Very useful for centering.
justify-content	start \| end \| center \| space-between \| space-around \| space-evenly	Distributes grid tracks horizontally when total track width is less than the container.
align-content	start \| end \| center \| space-between \| space-around \| space-evenly	Distributes grid tracks vertically when total track height is less than the container.
grid-auto-columns	Any track size value	Sets the size of columns created outside the explicit grid – when items are placed beyond defined columns.
grid-auto-rows	Any track size value	Sets the size of automatically created rows. Common use: grid-auto-rows: minmax(100px, auto) for equal-minimum card rows.
grid-auto-flow	row (default) \| column \| dense	Controls how auto-placed items fill the grid. dense fills gaps with smaller items – useful for photo galleries.

Reference

CSS Grid item properties

Apply these to direct children of a grid container to control their placement, spanning and alignment.

Property	Values	Description
grid-column-start	Line number or named line	Defines which vertical grid line the item starts on. 1 = the first line.
grid-column-end	Line number, named line, or span N	Defines where the item ends. span 2 means span across two columns.
grid-column	start / end	Eg: grid-column: 1 / 3 spans from line 1 to line 3. grid-column: 1 / span 2 does the same thing.
grid-row-start	Line number or named line	Defines which horizontal grid line the item starts on.
grid-row-end	Line number, named line, or span N	Defines where the item ends on the row axis.
grid-row	start / end	Eg: grid-row: 1 / 3 or grid-row: 1 / span 2. Same shorthand pattern as grid-column.
grid-area	Named area from grid-template-areas, or row-start / col-start / row-end / col-end	The most powerful placement shorthand.
justify-self	start \| end \| center \| stretch	Overrides justify-items for a single grid item along the inline axis.
align-self	start \| end \| center \| stretch	Overrides align-items for a single grid item along the block axis.
place-self	align-self justify-self	Shorthand for both axes on a single item.

Concept

The fr unit explained

fr stands for fraction. 1fr means one equal share of the available space after fixed widths and gaps are subtracted. Think of it as slicing the remaining space like a pizza – 3 equal slices is 1fr 1fr 1fr.

1fr

grid-template-columns: 1fr 1fr 1fr

Example 1: grid-template-columns: 1fr 1fr 1fr – three equal columns. Example 2: grid-template-columns: 2fr 1fr – left column is twice as wide. Example 3: grid-template-columns: 200px 1fr – fixed sidebar, flexible content.

Percentage widths include the gap in their calculation, so 3 x 33.33% will overflow if there is a gap. fr excludes gaps – it divides only what is left after them. This makes fr simpler and more predictable.

Try fr in the generator

Patterns

Common CSS Grid patterns

Equal responsive columns

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

Auto-wraps cards at any width without media queries.

Holy Grail layout

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header header header'
    'left main right'
    'footer footer footer';
}

Header, footer, main and two sidebars.

Named areas

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    'sidebar content'
    'sidebar content';
}
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

Names make layout intent clear.

Dense packing

CSS

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-flow: dense;
  gap: 0.5rem;
}

dense fills gaps left by items of different sizes, useful for masonry-style galleries.

Build this layout in the generator

Syntax Comparison

CSS Grid in 4 languages

The same 3-column responsive grid expressed in CSS, Tailwind, JavaScript and SCSS.

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Tailwind

<div class="grid grid-cols-3 gap-4">

JavaScript

const el = document.querySelector('.grid');
el.style.display = 'grid';
el.style.gridTemplateColumns = 'repeat(3, 1fr)';
el.style.gap = '1rem';

SCSS

$cols: 3;
.grid {
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  gap: 1rem;
}

Generate all four outputs at once

FAQ

Frequently asked questions

What is the most important CSS Grid property to learn first?

grid-template-columns. It defines how many columns your grid has and how wide they are. Once you understand track sizing and the fr unit, the rest of CSS Grid becomes much easier.

What does fr mean in CSS Grid?

fr stands for fraction. 1fr means one equal share of the remaining space after fixed widths and gaps are subtracted. 2fr gets twice as much space as 1fr.

When should I use CSS Grid instead of Flexbox?

Use CSS Grid for two-dimensional layouts – when you need to control both rows and columns. Use Flexbox for one-dimensional layouts – a row of buttons or a vertical stack of items.

How do I make a responsive CSS Grid without media queries?

Use repeat(auto-fill, minmax(minWidth, 1fr)). This creates as many columns as will fit at the minimum width, and they grow to fill the rest. No media queries needed.

How do grid-template-areas work?

Define named regions in the container as quoted strings – one string per row. Then assign each grid item to a region using grid-area: name. The visual layout in the CSS matches the actual layout on screen.

How do I make a grid item span multiple columns?

Use grid-column: span N (eg: grid-column: span 2 to span two columns) or use grid-column: start / end (eg: grid-column: 1 / 3 to run from line 1 to line 3).

What are the Tailwind CSS Grid utility classes?

grid (sets display:grid), grid-cols-N (sets column count), col-span-N (item spanning), gap-N (gap size), and place-items-* for alignment. Generate the exact classes in Gridlock Holmes.

CSS Grid cheat sheet: every property, explained