Gera Tools

CSS Grid Cheatsheet

Every CSS grid property, grouped and searchable — copy any one-liner.

A searchable CSS grid cheatsheet covering the container, track sizing with fr and minmax, item placement, alignment and responsive recipes. Copy any property with one click. Runs entirely in your browser, nothing is uploaded. It runs free in your browser on Gera Tools, with nothing uploaded.

Last updated Source: Gera Tools

How do I make a responsive grid without media queries?

Use grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). It fits as many 250px-plus columns as the width allows and stretches them to fill the row, reflowing automatically as the screen resizes.

This is a searchable CSS grid cheatsheet covering the properties you reach for when building two-dimensional layouts, each with a plain description and copy-ready CSS. It is grouped into container setup, responsive track sizing, item placement and alignment, plus common recipes — so you can find the right property without leaving your editor.

How it works

The reference is organised by what each property does. Container properties (display: grid, grid-template-columns/rows, gap, grid-template-areas) define the grid. Track sizing uses the fr fraction unit and minmax()/repeat() for responsive columns. Item placement properties (grid-column, grid-row, grid-area) position children across the tracks, and alignment properties handle spacing. Search by property name or by intent — “columns”, “span”, “auto-fit”, “center” — and copy the exact CSS.

Quick recipes

Responsive card gallery (no media queries):

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

Named-area page layout:

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}
header  { grid-area: header; }
.sidebar{ grid-area: sidebar; }
main    { grid-area: content; }
footer  { grid-area: footer; }

Item spanning multiple columns:

.featured { grid-column: 1 / -1; } /* span full row */
.wide     { grid-column: span 2; } /* span exactly 2 tracks */

Using -1 as the end line always reaches the last explicit column, regardless of how many columns there are.

Fixed-and-fluid sidebar layout:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.5rem;
}

The sidebar is a fixed 240 px; the main area takes all remaining space.

auto-fit vs auto-fill

Both keywords fill a repeat() with as many tracks as fit. The difference appears when there is leftover space after placing all items:

  • auto-fit collapses empty tracks to zero width, so existing items stretch to fill the row.
  • auto-fill keeps empty tracks at their minimum width, leaving visible gaps.

For stretchy galleries, auto-fit gives the expected behaviour. For fixed-width stamp patterns where gaps should be preserved, auto-fill is the right choice.

The fr unit

fr represents a fraction of the free space remaining after fixed-size tracks are placed. grid-template-columns: 1fr 2fr gives a 1:2 ratio of that free space. If the grid has a 240 px fixed column followed by 1fr, the fr column gets all space minus 240 px and any gaps.

Search by property name or by what you want to do — “columns”, “span”, “auto-fit”, “center” — and copy the exact CSS into your stylesheet. Everything runs in your browser; nothing is uploaded.