All Tools VerseCSS Grid is the layout system for arranging items into rows and columns at the same time. This cheat sheet lists the container and item properties, plus the sizing functions that make grids responsive.
Container (parent)
| Property | Values / what it does |
|---|---|
display: grid |
Makes the element a grid container |
grid-template-columns |
Defines the column tracks, e.g. 1fr 1fr or repeat(3, 1fr) |
grid-template-rows |
Defines the row tracks |
grid-template-areas |
Names areas so items can be placed by name |
gap |
Space between tracks, e.g. gap: 16px (also row-gap, column-gap) |
justify-items |
Align items on the row axis: start | center | end | stretch |
align-items |
Align items on the column axis: start | center | end | stretch |
justify-content |
Align the whole grid in spare space (row axis) |
align-content |
Align the whole grid in spare space (column axis) |
grid-auto-flow |
How auto-placed items flow: row | column | dense |
grid-auto-rows |
Size of rows created automatically |
Items (children)
| Property | Values / what it does |
|---|---|
grid-column |
Columns an item spans, e.g. 1 / 3 or span 2 |
grid-row |
Rows an item spans, e.g. 1 / 3 or span 2 |
grid-area |
Shorthand for row and column, or a named area |
justify-self |
Align one item on the row axis |
align-self |
Align one item on the column axis |
Sizing and functions
| Value | What it does |
|---|---|
fr |
A fraction of the free space, e.g. 1fr 2fr |
minmax(min, max) |
A track that grows between a minimum and maximum |
repeat(n, size) |
Repeat a track pattern, e.g. repeat(3, 1fr) |
auto-fit / auto-fill |
Fit as many tracks as will fit, used with repeat and minmax |
min-content / max-content |
Size a track to the smallest or largest content |
auto |
Size to the content or the remaining space |
Frequently Asked Questions
What is CSS Grid?
CSS Grid is a two-dimensional layout system that arranges items into rows and columns together, with fine control over sizing and spacing.
What is the difference between Grid and Flexbox?
Grid is two-dimensional, controlling rows and columns at once. Flexbox is one-dimensional, a single row or column. They are often used together.
What does fr mean in CSS Grid?
fr is a fractional unit. It divides the leftover space in the container, so 1fr 2fr gives the second track twice as much space as the first.
How do I make a responsive grid without media queries?
Use repeat(auto-fit, minmax(200px, 1fr)). It fits as many columns as will fit and lets them grow to fill the row.
Build layouts visually with our free CSS Grid Generator and CSS Flexbox Generator.