Gera Tools

CSS Grid Reference

Every CSS Grid property for containers and items, searchable with values.

Interactive CSS Grid reference covering grid container and grid item properties — template, placement, alignment, gaps, and the implicit grid — each with accepted values, defaults, and concise explanations. Filter instantly.

What is the difference between explicit and implicit grids?

The explicit grid is defined by grid-template-rows and grid-template-columns. When items land outside it, the browser creates implicit tracks sized by grid-auto-rows and grid-auto-columns and placed per grid-auto-flow.

CSS Grid reference

CSS Grid is a two-dimensional layout system: you define rows and columns on a container, then place items into the resulting cells or named areas. This reference covers every standard grid property in both groups — track definition, the implicit grid, gaps, alignment, and item placement — with accepted values, defaults, and short descriptions, plus live search.

How it works

A grid begins with display: grid on the container. grid-template-columns, grid-template-rows, and grid-template-areas define the explicit grid; grid-auto-rows, grid-auto-columns, and grid-auto-flow govern the implicit tracks created for overflowing items. Alignment uses two axes: justify-* on the inline axis and align-* on the block axis, with -items aligning cell content and -content distributing the tracks. Item placement uses line numbers, named lines, or area names via grid-column, grid-row, and grid-area. The filter matches names, values, and descriptions.

Tips and example

A classic responsive grid with no media queries:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
  • repeat(auto-fit, minmax(220px, 1fr)) makes columns that grow to fill the row and wrap when they would get narrower than 220px.
  • Name regions with grid-template-areas and assign them with grid-area for highly readable layouts.
  • gap replaces the old grid-gap / grid-row-gap / grid-column-gap names, which are still supported as aliases.