CSS Grid Layout

The CSS Grid Layoutopen in new window is a two-dimensional grid system used to layout major page areas or small user interface elements. The grid layout enables an author to align elements into columns and rows.

CSS Grid Terminology

Like many technology, there are special terms that are used when discussing CSS Grid.

TermMeaning
Grid ContainerThe element that display: grid is applied
Grid ItemThe direct child of a grid container
Grid LinesThe dividing lines that make up the grid structure, which run both vertically (columns) and horizontally (rows)
Grid TrackThe space between two grid lines (aka a single column or a single row)
Grid CellA single unit of the grid
Explicit GridThe grid column and rows defined in CSS Rules
Implicit GridThe grid column and rows auto-generated by the browser, but not defined