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.

What is the fr unit in CSS grid?

fr is a fraction of the leftover free space in the grid container. grid-template-columns of 1fr 2fr gives two columns where the second is twice as wide as the first.

What is the difference between auto-fit and auto-fill?

Both create as many tracks as fit. With auto-fit, leftover empty tracks collapse so existing items stretch to fill the row; with auto-fill, empty tracks are kept, leaving gaps. Use auto-fit for stretchy galleries.

How do I place an item across multiple columns?

Use grid-column to span tracks, for example grid-column: 1 / 3 (from line 1 to line 3) or grid-column: span 2 to cover two columns from its current position.

Is anything I search or copy uploaded?

No. The whole cheatsheet and its search run in your browser, so nothing you type or copy is ever sent anywhere.

CSS Grid Cheatsheet — Gera Tools

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.

Example

To build a responsive card gallery that reflows without media queries, search “auto-fit” and you get:

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

This fits as many 250px-or-wider columns as the width allows and stretches them to fill the row, reflowing automatically as the screen resizes.

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.