Terminology
- Grid Container
- The grid container holds all the contents placed on the grid.
- Grid Item
- The contents of the grid container are called the grid items.
- Track
- A track runs from one end of the container to the other.
- Cell
- Cells are squares or rectangles formed by rows and columns.
- Area
- A rectangle or square made of two or more grid cells.
- Explicit Grid
- The template columns, rows, and areas form the explicit grid.
- Implicit Grid
- Tracks automatically generated when the grid container adds grid lines.
- Grid Template
- Defines the grid columns, rows, and named areas.
- Gutters
- The spaces between grid tracks.
- Grid Naming
- Assigning names to grid lines to define areas.
Properties
- column-gap
- Sets the gap between columns.
- grid-template-rows
- Defines row sizes.
- grid-template-columns
- Defines column sizes.
- grid-template-areas
- Defines named grid areas.
- grid-auto-rows
- Size of automatically created rows.
- grid-auto-columns
- Size of automatically created columns.
- grid-auto-flow
- Controls item placement.
- grid-area
- Shorthand for row/column start and end.
- grid-column
- Shorthand for column start and end.
- grid-column-end
- Where the item ends.
- grid-column-gap
- Gap between columns.
- grid-column-start
- Where the item begins.
- grid-gap
- Shorthand for row-gap and column-gap.
- grid-row
- Shorthand for row start and end.
- grid-row-end
- Where the item ends.
- grid-row-gap
- Gap between rows.
- grid-row-start
- Where the item begins.
- grid-template
- Shorthand for rows, columns, and areas.
- masonry-auto-flow
- Experimental masonry layout behavior.
- align-tracks
- Aligns tracks along the block axis.
- justify-tracks
- Aligns tracks along the inline axis.