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. It runs free in your browser on Gera Tools, with nothing uploaded.

Last updated Source: Gera Tools

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.

Explicit vs implicit grids

When you define grid-template-columns and grid-template-rows, you are building the explicit grid. Items that do not fit in the explicit grid spill into the implicit grid — extra tracks the browser generates automatically, sized by grid-auto-rows and grid-auto-columns. The direction items flow into these implicit tracks is controlled by grid-auto-flow:

  • row (default): items fill rows left to right, adding new rows as needed.
  • column: items fill columns top to bottom, adding new columns.
  • dense: the browser backtracks to fill gaps left by larger items, producing a denser pack at the cost of visual order.

Always set grid-auto-rows to a consistent minimum height when using implicit rows so that dynamically added items do not collapse:

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

Alignment properties decoded

Grid has six alignment properties, which often cause confusion:

PropertyAxisAligns
justify-itemsinlinecell content within each cell
align-itemsblockcell content within each cell
justify-selfinlinea single item within its cell
align-selfblocka single item within its cell
justify-contentinlinethe whole grid track group inside the container
align-contentblockthe whole grid track group inside the container

justify-content: center centres the columns as a group when the total track width is less than the container width. justify-items: center centres the content of each cell within its track. They are entirely independent.

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.
  • Use negative line numbers to reference from the end: grid-column: 1 / -1 always spans the full explicit row, regardless of column count.