CSS Grid provides two-dimensional layout control over rows and columns simultaneously, using grid-template definitions, the fr unit for fractional space, auto-fit/auto-fill for responsive grids, and named grid areas for semantic layout declarations.
Grid defines both rows and columns on the container, allowing items to be placed anywhere in the two-dimensional space. Flexbox only handles one direction at a time.
The fr unit distributes remaining space proportionally after fixed tracks are calculated. Combined with minmax() and repeat(), it enables flexible track definitions.
repeat(auto-fit, minmax(min, 1fr)) creates grids that automatically adjust column count based on available width, replacing multiple media query breakpoints with a single declaration.
grid-template-areas provides a visual, semantic map of the layout that is self-documenting and easy to rearrange in different media query breakpoints.
CSS Grid Layout is the most powerful layout system in CSS. It provides two-dimensional control over both rows and columns, making it ideal for page-level layouts and complex component arrangements.
A grid container is created with display: grid (or display: inline-grid). Direct children become grid items. The grid is defined by its tracks (rows and columns):
.layout {
display: grid;
grid-template-columns: 250px 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 1rem;
}The fr (fraction) unit distributes remaining space after fixed-size tracks are calculated. 1fr 2fr gives the second column twice the space of the first. Unlike percentages, fr accounts for gaps and fixed tracks automatically — grid-template-columns: 200px 1fr gives 200px to the first column and all remaining space (minus the gap) to the second.
min and at most max. minmax(200px, 1fr) creates a column that is never smaller than 200px but grows with available space.repeat(3, 1fr) creates three equal columns.repeat(auto-fit, minmax(250px, 1fr)).Grid items are placed by line numbers (starting at 1):
.header {
grid-column: 1 / -1; /* span all columns */
grid-row: 1 / 2;
}
.sidebar {
grid-column: 1 / 2;
grid-row: 2 / 3;
}The span keyword is more readable: grid-column: span 2 makes an item span two columns.
Grid areas provide semantic layout declarations:
.layout {
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }Named areas make layouts self-documenting and easy to rearrange in media queries.
Grid supports the same alignment properties as Flexbox:
justify-items / align-items — Aligns items within their grid cellsjustify-content / align-content — Distributes the entire grid within the containerjustify-self / align-self — Overrides alignment for a single itemplace-items / place-content / place-self — Shorthands combining both axes| Aspect | Grid | Flexbox | |--------|------|---------| | Dimensions | Two (rows + columns) | One (row or column) | | Content vs Layout | Layout-first (tracks defined on container) | Content-first (items determine sizing) | | Best for | Page layouts, dashboards, gallery grids | Navigation bars, card contents, inline elements | | Item placement | Explicit placement by line/area | Sequential flow with optional reordering |
The rule of thumb: use Grid for overall page structure and any layout that needs both row and column control. Use Flexbox for linear component layouts. They are complementary and often used together.
The most powerful responsive pattern in CSS Grid uses no media queries at all:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}This creates a grid that automatically adjusts the number of columns based on available width, with each column at least 300px wide. This single declaration replaces what previously required multiple media query breakpoints.
The subgrid value allows a nested grid to inherit track sizing from its parent grid. This solves the long-standing problem of aligning content across sibling grid items (like aligning card titles and descriptions at the same line). Supported in all modern browsers since late 2023.
Fun Fact
CSS Grid was championed by Rachel Andrew and Jen Simmons for years before it shipped. The specification took almost 5 years to develop — partly because getting a two-dimensional layout system right is genuinely hard, and partly because the CSS Working Group wanted to avoid the mistakes of earlier layout hacks like floats and tables.