display: grid - what it does and how to use it
The complete guide to the display: grid CSS property, including what it does, how it compares with display: flex, and how to use it.
display: grid do?Applying display: grid to an element turns it into a CSS Grid container. Its direct children become grid items, and the container controls how they are sized and positioned.
Without display: grid, children follow the normal page layout. With it, they can be arranged in rows and columns.
.container {
display: grid;
}
That is all it takes to create a grid container.
Once display: grid is applied, you can use properties such as grid-template-columns, grid-template-rows, gap, justify-items, align-items, grid-template-areas.
display: grid vs display: flexNeither is better. They solve different layout problems. Grid works in two dimensions, rows and columns. Flexbox works in one dimension at a time.
Most projects use both. Grid is often used for the main layout, while Flexbox handles alignment within individual components.
| Aspect | display: grid | display:flex |
|---|---|---|
| Dimensions | Handles 2D layout - rows and columns together | Handles 1D layout - a single row or column |
| Typical use | Page layouts, card grids | Navigation bars, toolbars, button rows |
| Item control | Items placed by container rules | Items placed by item flow |
| Responsiveness | auto-fill + minmax for intrinsic responsiveness | Wraps via flex-wrap |
Most production projects use both - Grid for the layout shell, Flex for alignment within components.
display: grid vs display: inline-griddisplay: grid creates a block-level grid container that takes up the full width. display: inline-grid creates an inline-level container that sizes to its content.
Use inline-grid when the container needs to sit inline with text or other elements, like a badge or a small widget.
.badge {
display: inline-grid;
}
inline-grid sizes to its content and sits inline with surrounding text.
display: gridApply display: grid to a parent element. All children become grid items.
Set grid-template-columns to define how many columns and how wide they are.
Add gap to set the space between items.
Place items manually with grid-column and grid-row, or use auto-placement.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.item { background: #4F46E5; }
A complete first grid: a container with display: grid, 3 columns, a gap, and 6 items that auto-place themselves.
display: grid mistakesApplying grid properties to items instead of the container. display: grid goes on the parent, not the children.
Adding display: grid but no columns - items stack in one column. Add grid-template-columns to define the layout.
Using percentages with gap. Percentages include the gap in calculations and can cause overflow. Use fr instead.
Placing items beyond defined columns or rows creates implicit tracks that may be very small. Define grid-auto-columns or grid-auto-rows.
display: grid in 4 languagesThe same 3-column equal-width grid in CSS, Tailwind, JavaScript and SCSS.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
<div class="grid grid-cols-3 gap-4">
el.style.display = 'grid'; el.style.gridTemplateColumns = 'repeat(3, 1fr)'; el.style.gap = '1rem';
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
display: grid activates the CSS Grid formatting context on an element, turning its direct children into grid items arranged on rows and columns.display: grid is a two-dimensional layout system that controls rows and columns together. display:flex is one-dimensional, aligning items along a single row or column.inline-grid when the container should sit inline with text or other elements, like a badge or small widget, instead of spanning the full width.display: grid is applied to the parent element, not the children, and that grid-template-columns is defined.display: grid is supported in all modern browsers.display: grid applied.Visual generator. Free, no signup. CSS, Tailwind, JS and SCSS.