Master the powerful two-dimensional layout system for creating complex web layouts.
CSS Grid Layout is a powerful two-dimensional layout system designed for the web. It lets you lay out items in rows and columns, and has many features that make building complex layouts straightforward.
Flexbox: One-dimensional layout (either rows OR columns)
CSS Grid: Two-dimensional layout (rows AND columns)
Use Flexbox for components, CSS Grid for page layouts!
To create a CSS Grid, you need to set the display
property to grid
or inline-grid
on a container element.
/* Basic grid container */
.grid-container {
display: grid;
}
/* Inline grid container */
.inline-grid {
display: inline-grid;
}
3 columns × 2 rows grid layout
The grid-template-columns
property defines the columns in your grid layout.
/* Fixed width columns */
.grid {
display: grid;
grid-template-columns: 200px 200px 200px;
}
/* Fractional units */
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Equal width columns */
}
/* Mixed units */
.grid {
display: grid;
grid-template-columns: 200px 1fr 2fr; /* Fixed, 1 fraction, 2 fractions */
}
/* Using repeat() function */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}
/* Auto-fit with minimum width */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
The fr
unit represents a fraction of the available space in the grid container.
1fr
= 1 fraction of available space2fr
= 2 fractions (twice as wide as 1fr)1fr 2fr 1fr
= 25% 50% 25% of available spaceThe grid-template-rows
property defines the rows in your grid layout.
/* Fixed height rows */
.grid {
display: grid;
grid-template-rows: 100px 100px 100px;
}
/* Fractional units */
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
/* Mixed units */
.grid {
display: grid;
grid-template-rows: 100px 1fr 2fr;
}
/* Using repeat() function */
.grid {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
/* Auto height rows */
.grid {
display: grid;
grid-template-rows: auto 1fr auto; /* Header, content, footer */
}
The gap
property creates space between grid items without affecting the outer edges.
/* Equal gap for rows and columns */
.grid {
display: grid;
gap: 20px;
}
/* Different gaps for rows and columns */
.grid {
display: grid;
gap: 20px 10px; /* row-gap column-gap */
}
/* Individual gap properties */
.grid {
display: grid;
row-gap: 20px;
column-gap: 10px;
}
/* No gap */
.grid {
display: grid;
gap: 0;
}
Grid lines are the dividing lines that make up the structure of the grid. They are numbered starting from 1, and you can reference them to position grid items.
/* Positioning items using line numbers */
.grid-item {
grid-column: 1 / 3; /* Start at line 1, end at line 3 */
grid-row: 1 / 2; /* Start at line 1, end at line 2 */
}
/* Using span keyword */
.grid-item {
grid-column: 1 / span 2; /* Start at line 1, span 2 columns */
grid-row: 1 / span 2; /* Start at line 1, span 2 rows */
}
/* Shorthand properties */
.grid-item {
grid-area: 1 / 1 / 3 / 3; /* row-start / column-start / row-end / column-end */
}
Grid lines are shown as dotted lines. Items can span multiple cells.
Grid areas allow you to create named regions in your grid layout, making it easier to create complex layouts.
/* Define grid areas on container */
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Assign elements to areas */
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
/* Mobile layout */
.layout {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
/* Tablet layout */
@media (min-width: 768px) {
.layout {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 2fr;
}
}
/* Desktop layout */
@media (min-width: 1024px) {
.layout {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr 1fr;
}
}
You can control how individual grid items are positioned and sized within the grid.
/* Grid column positioning */
.item {
grid-column-start: 1;
grid-column-end: 3;
/* Shorthand: */
grid-column: 1 / 3;
}
/* Grid row positioning */
.item {
grid-row-start: 1;
grid-row-end: 3;
/* Shorthand: */
grid-row: 1 / 3;
}
/* Grid area shorthand */
.item {
grid-area: 1 / 1 / 3 / 3; /* row-start / column-start / row-end / column-end */
}
/* Using span */
.item {
grid-column: 1 / span 2; /* Start at 1, span 2 columns */
grid-row: 1 / span 2; /* Start at 1, span 2 rows */
}
Property | Values | Description |
---|---|---|
grid-column-start |
number, span number, auto | Start position of item in column |
grid-column-end |
number, span number, auto | End position of item in column |
grid-column |
start / end | Shorthand for column start/end |
grid-row-start |
number, span number, auto | Start position of item in row |
grid-row-end |
number, span number, auto | End position of item in row |
grid-row |
start / end | Shorthand for row start/end |
grid-area |
name, row-start / column-start / row-end / column-end | Shorthand for all positioning |
CSS Grid provides powerful alignment properties for both the grid container and grid items.
/* Container alignment */
.grid {
display: grid;
justify-items: center; /* Align items horizontally */
align-items: center; /* Align items vertically */
justify-content: center; /* Align grid horizontally */
align-content: center; /* Align grid vertically */
}
/* Individual item alignment */
.grid-item {
justify-self: start; /* Align item horizontally */
align-self: end; /* Align item vertically */
}
/* Alignment values */
/* start, end, center, stretch */
/* space-around, space-between, space-evenly */
/* Mobile-first responsive grid */
.grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
/* Tablet */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Large screens */
@media (min-width: 1200px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}