Align Items & Align Self
align-items controls where every grid item sits within its cell on the vertical (block) axis. align-self overrides that for one specific item.
Auto-fill
A keyword used with repeat(), e.g. repeat(auto-fill, minmax(200px, 1fr)). Fits as many tracks as will comfortably fit the container, and keeps any leftover empty tracks in place rather than collapsing them - so existing items don't stretch to fill the gap.
Auto-fit
Behaves like auto-fill, except empty tracks collapse to zero width once created, letting the remaining items stretch to fill the extra space. The usual choice for a responsive card grid that should always look full.
Auto-placement
CSS Grid's default behaviour: items you haven't positioned explicitly are placed automatically into the next available cell, filling row by row.
Dense Packing
Set with grid-auto-flow: dense. Tells the browser to backfill gaps in the grid with smaller items that appear later in the source order, instead of leaving holes. Useful for photo galleries with mixed image sizes.
Explicit Grid
The rows and columns you define directly with grid-template-columns and grid-template-rows. Compare with the implicit grid.
fr Unit
fr stands for fraction. 1fr is one equal share of the space left over after fixed-width tracks and gaps are subtracted. Unlike percentages, fr divides only what's left after the gap, so it never causes columns to overflow. See the fr unit explained for worked examples.
Gap (Row Gap / Column Gap)
The gutter between grid tracks. Set both at once with the gap shorthand, or independently with row-gap and column-gap.
Grid Area
One or more grid cells that form a rectangular region - either a single cell, a group spanned with grid-column/grid-row, or a named region declared in grid-template-areas.
Grid Auto Columns & Grid Auto Rows
Sets the size of tracks created in the implicit grid - for example, when you place more items than your grid-template explicitly has room for.
Grid Cell
The smallest unit of a grid: the space where one row track and one column track intersect.
Grid Container
The element with display: grid (or inline-grid) applied. All of its direct children automatically become grid items.
Grid Item
A direct child of a grid container. Grid items are placed into cells automatically via auto-placement, unless you position them explicitly.
Grid Line
The numbered dividing lines that make up a grid's structure. A 3-column grid has 4 vertical grid lines, numbered 1 to 4 (or counted backwards from -1).
Grid Template Areas
A way to sketch a layout visually in your CSS, using named strings like "header header" "nav main", then placing each item into a named region with grid-area.
Grid Track
A single column or row in the grid - the space between two adjacent grid lines.
Holy Grail Layout
A classic page layout with a header, footer, main content area and two sidebars. A common way to demonstrate CSS Grid, since grid-template-areas makes it quick to build. See how to build one.
Implicit Grid
Extra rows or columns CSS Grid creates automatically when you place more items than your explicit grid has room for. Sized with grid-auto-rows / grid-auto-columns, which default to auto.
Justify Items & Justify Self
justify-items controls where every grid item sits within its cell on the horizontal (inline) axis. justify-self overrides that for one specific item.
Line-based Placement
Positioning a grid item by referencing grid line numbers directly, e.g. grid-column: 1 / 3, rather than using a named area.
minmax()
A function that sets a track's minimum and maximum size in one step. minmax(200px, 1fr) never shrinks below 200px, but grows to fill its fr share when there's room.
Named Lines & Named Areas
Custom names given to grid lines or grid regions, so you can place items by name instead of counting line numbers.
Place Items & Place Self
Shorthand combining align-items + justify-items (or align-self + justify-self) into one declaration. place-items: center centers everything in both directions at once.
repeat()
Shorthand for repeating the same track size multiple times - repeat(3, 1fr) is identical to 1fr 1fr 1fr. Often paired with auto-fit or auto-fill for responsive grids.
Responsive Grid
A grid that adapts to different screen sizes without media queries, typically built with repeat(auto-fit, minmax(240px, 1fr)) so columns are added or removed automatically as space allows.
Subgrid
A value for grid-template-columns/grid-template-rows that lets a nested grid item inherit its parent's track sizing, so nested content can line up with the outer grid's columns or rows.
Two-dimensional Layout
The defining trait of CSS Grid: it controls rows and columns together. Flexbox, by contrast, is one-dimensional - it only controls a single row or column at a time. Most real layouts use both.
Want the property-by-property version instead? See the full CSS Grid cheat sheet, or build a layout directly in the generator.