CSSINTERMEDIATECSS Grid
CSS Grid cheat sheet with grid-template, auto-fit, minmax, named areas, and responsive layout patterns with visual code examples.
5 min read
cssgridlayoutresponsive
Other CSS Sheets
Sign in to mark items as known and track your progress.
Sign inGrid Container
Create Grid Container
Transform any element into a grid layout container that creates a two-dimensional layout system
css
.container {
display: grid; /* or inline-grid */
}📄 HTMLhtml
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>🎨 Display Grid
1
2
3
4
Define Columns
Set the number and size of columns in your grid layout using various sizing units
css
.container {
grid-template-columns: 100px 200px auto;
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: minmax(100px, 1fr);
}📄 HTMLhtml
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>🎨 Fixed Width
100px
200px
100px
🎨 Fractional Units
1fr
2fr
1fr
🎨 Repeat & Minmax
Auto
Auto
Auto
Auto
Define Rows
Set the number and size of rows in your grid layout with flexible sizing options
css
.container {
grid-template-rows: 100px 200px auto;
grid-template-rows: repeat(3, 100px);
grid-auto-rows: minmax(100px, auto);
}📄 HTMLhtml
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>🎨 Fixed Heights
100px
200px
100px
Grid Gaps
Add consistent spacing between grid cells without using margins
css
.container {
gap: 10px; /* row and column gap */
column-gap: 20px; /* column gap only */
row-gap: 10px; /* row gap only */
gap: 10px 20px; /* row column */
}📄 HTMLhtml
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>🎨 Gap Demo
1
2
3
4
Alignment
Justify Items (Horizontal)
Align grid items horizontally within their cells
css
.container {
justify-items: start; /* align to start */
justify-items: center; /* center items */
justify-items: end; /* align to end */
justify-items: stretch; /* stretch to fill */
}📄 HTMLhtml
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>🎨 Justify Items
Start
Center
End
Align Items (Vertical)
Align grid items vertically within their cells
css
.container {
align-items: start; /* align to top */
align-items: center; /* center vertically */
align-items: end; /* align to bottom */
align-items: stretch; /* stretch to fill */
}📄 HTMLhtml
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>🎨 Align Items
Start
Center
End
Place Items (Both)
Shorthand to align items both horizontally and vertically in one declaration
css
.container {
place-items: center; /* center both */
place-items: start end; /* align / justify */
place-items: center stretch; /* center vertically, stretch horizontally */
}📄 HTMLhtml
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>🎨 Place Items
1
2
3
4
Justify Content (Grid)
Align the entire grid within its container when the grid is smaller than the container
css
.container {
justify-content: start; /* align grid to start */
justify-content: center; /* center grid */
justify-content: space-between;/* space between columns */
justify-content: space-around; /* space around columns */
}📄 HTMLhtml
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>🎨 Justify Content
1
2
3
Grid Items
Position Columns
Control which columns a grid item spans using line numbers or named lines
css
.item {
grid-column: 1 / 3; /* start / end */
grid-column: span 2; /* span columns */
grid-column-start: 1;
grid-column-end: 3;
}📄 HTMLhtml
<div class="container">
<div class="item span-2">Span 2</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>🎨 Column Span
Span 2
1
2
3
Position Rows
Control which rows a grid item spans using line numbers or span keyword
css
.item {
grid-row: 1 / 3; /* start / end */
grid-row: span 2; /* span rows */
grid-row-start: 1;
grid-row-end: 3;
}📄 HTMLhtml
<div class="container">
<div class="item span-rows">Span 2 Rows</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>🎨 Row Span
Span 2 Rows
1
2
3
Grid Area
Place items using grid area names or shorthand for row and column positioning
css
.item {
grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */
grid-area: header; /* named area */
}📄 HTMLhtml
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>🎨 Named Areas
Header
Main
Advanced Grid
Auto-Fit vs Auto-Fill
Create responsive grids that automatically adjust the number of columns
css
.container {
/* Auto-fit - collapses empty columns */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
/* Auto-fill - keeps empty columns */
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}📄 HTMLhtml
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>🎨 Auto-Fit
1
2
3
🎨 Auto-Fill
1
2
3
Grid Auto Flow
Control how items are automatically placed in the grid
css
.container {
grid-auto-flow: row; /* default - fill by rows */
grid-auto-flow: column; /* fill by columns */
grid-auto-flow: dense; /* fill gaps */
grid-auto-flow: row dense; /* row with gap filling */
}📄 HTMLhtml
<div class="container">
<div class="item">1</div>
<div class="item wide">2 (wide)</div>
<div class="item">3</div>
<div class="item tall">4 (tall)</div>
<div class="item">5</div>
</div>🎨 Dense Packing
1
2 (wide)
3
4 (tall)
5
6
Subgrid
Allow nested grid items to inherit the parent grid's tracks
css
.child {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}📄 HTMLhtml
<div class="parent">
<div class="child">
<div class="subitem">1</div>
<div class="subitem">2</div>
</div>
</div>Grid Functions
Powerful CSS functions for flexible and responsive grid sizing
css
.container {
grid-template-columns:
repeat(3, 1fr) /* repeat pattern */
minmax(100px, 1fr) /* min and max size */
fit-content(200px) /* fit content up to max */
clamp(100px, 50%, 300px); /* min, preferred, max */
}📄 HTMLhtml
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>Common Layouts
Holy Grail Layout
Classic web layout with header, footer, main content, and sidebars using grid
css
.container {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}📄 HTMLhtml
<div class="container">
<header class="header">Header</header>
<nav class="nav">Navigation</nav>
<main class="main">Main Content</main>
<aside class="aside">Sidebar</aside>
<footer class="footer">Footer</footer>
</div>🎨 Holy Grail
Responsive Card Grid
css
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;🎨 Card Grid
Card 1
Card 2
Card 3
Card 4
Masonry-Style Grid
css
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 50px;
grid-auto-flow: dense;
/* Items use grid-row: span X; */