CSS Grid

Properties that establish a grid and define its rows, columns, and gaps.

Term / Syntax	Name	Description	Example
display	Grid Container	Turns direct children into grid items.	display: grid;
grid-template-columns	Column Tracks	Defines explicit column track sizes.	grid-template-columns: repeat(3, 1fr);
grid-template-rows	Row Tracks	Defines explicit row track sizes.	grid-template-rows: auto 1fr auto;
gap	Track Spacing	Sets space between rows and columns.	gap: 1.5rem;
grid-template-areas	Named Layout	Defines a visual template using named areas.	grid-template-areas: "header header" "nav main";

Values and functions for creating flexible and responsive grid tracks.

Term / Syntax	Name	Description	Example
fr	Fractional Unit	Allocates a fraction of available grid space.	grid-template-columns: 1fr 2fr;
repeat()	Repeat Tracks	Repeats a track pattern.	grid-template-columns: repeat(4, 1fr);
minmax()	Track Range	Allows a track to flex between minimum and maximum sizes.	grid-template-columns: minmax(16rem, 1fr) 2fr;
auto-fit	Fit Existing Tracks	Collapses empty repeated tracks while fitting as many as possible.	repeat(auto-fit, minmax(16rem, 1fr))
auto-fill	Reserve Track Slots	Creates as many repeated tracks as fit, including empty ones.	repeat(auto-fill, minmax(12rem, 1fr))

Properties for positioning items across rows, columns, and named areas.

Term / Syntax	Name	Description	Example
grid-column	Column Placement	Controls an item's column start and end lines.	grid-column: 1 / 3;
grid-row	Row Placement	Controls an item's row start and end lines.	grid-row: 2 / 4;
grid-area	Area Placement	Places an item in a named area or sets row/column shorthand.	grid-area: main;
span	Span Tracks	Makes an item span a specified number of tracks.	grid-column: span 2;

Properties for aligning items and the entire grid within available space.

Term / Syntax	Name	Description	Example
justify-items	Inline Item Alignment	Aligns items inside their grid areas on the inline axis.	justify-items: stretch;
align-items	Block Item Alignment	Aligns items inside their grid areas on the block axis.	align-items: center;
place-items	Item Alignment Shorthand	Combines align-items and justify-items.	place-items: center;
justify-content	Grid Inline Alignment	Positions the grid tracks inside extra inline space.	justify-content: center;
align-content	Grid Block Alignment	Positions grid tracks inside extra block-axis space.	align-content: start;