CSS Grid is the most powerful layout tool in CSS — yet most developers only use repeat(3, 1fr). This guide covers 35 grid patterns from the basics to production-ready layouts you can copy directly into your projects.
üîó Full visual guide with live grid previews: uixdraft.com/css-grid-examples
The Fundamentals (30 seconds)
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: auto; /* rows auto-size */
gap: 16px; /* gutter between cells */
}
That's all you need for 80% of use cases. Now let's go deeper.
Category 1: Basic Column Grids
2-Column Equal
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
3-Column Equal
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
Asymmetric Content + Sidebar (2:1)
.content-sidebar {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
}
Fixed Sidebar + Fluid Content
.fixed-sidebar {
display: grid;
grid-template-columns: 260px 1fr;
gap: 0;
}
Category 2: Template Areas
Named areas make complex layouts readable:
Holy Grail Layout
.holy-grail {
display: grid;
grid-template:
"header header header" auto
"nav main aside" 1fr
"footer footer footer" auto
/ 200px 1fr 200px;
min-height: 100vh;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
App Shell (Sidebar + Content)
.app-shell {
display: grid;
grid-template-areas:
"topbar topbar"
"sidebar content";
grid-template-columns: 260px 1fr;
grid-template-rows: 64px 1fr;
height: 100vh;
}
.topbar { grid-area: topbar; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
Category 3: Responsive Without Media Queries
This is where Grid really shines — the auto-fill + minmax() pattern:
/* Cards reflow automatically as viewport narrows */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
auto-fill vs auto-fit:
-
auto-fill— creates as many columns as fit, even if some are empty -
auto-fit— collapses empty columns so items stretch to fill the row
Use auto-fill for card grids (items should stay at their minimum width). Use auto-fit for a small number of items that should always stretch to fill the container.
/* Sidebar that stacks on mobile — no @media needed for the grid */
.with-sidebar {
display: grid;
grid-template-columns: 1fr 300px;
gap: 32px;
}
@media (max-width: 768px) {
.with-sidebar { grid-template-columns: 1fr; }
}
Category 4: Gallery Patterns
Featured + Thumbnails
.featured-grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(2, 1fr);
gap: 8px;
}
.featured { grid-row: 1 / -1; } /* spans all rows */
Mosaic (Varied Spans)
.mosaic {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
gap: 8px;
}
.tile-large { grid-column: span 2; grid-row: span 2; }
.tile-wide { grid-column: span 2; }
.tile-tall { grid-row: span 2; }
Category 5: Dashboard Layouts
KPI Stat Row
.kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kpi-row { grid-template-columns: 1fr; } }
Bento Grid (Mixed Widgets)
.bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 180px;
gap: 16px;
}
.widget-large { grid-column: span 2; grid-row: span 2; }
.widget-wide { grid-column: span 2; }
.widget-tall { grid-row: span 2; }
Category 6: Advanced Techniques
CSS Subgrid (Align Cards Across Rows)
The most underused Grid feature — children inherit parent grid tracks:
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* inherits parent row tracks */
}
/* Now card title/body/CTA align perfectly across all cards */
Dense Auto-Placement
Fills visual gaps left by spanning items:
.dense-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
grid-auto-flow: dense; /* fills gaps automatically */
gap: 8px;
}
Container Query Grid (Most Modern)
Grid that responds to its container, not the viewport:
.wrapper { container-type: inline-size; }
.card-grid { display: grid; grid-template-columns: 1fr; }
@container (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 900px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
The fr Unit Explained
fr = fraction of remaining free space (after fixed sizes and gaps).
/* 3 equal columns */
grid-template-columns: 1fr 1fr 1fr;
/* Left twice as wide as right */
grid-template-columns: 2fr 1fr;
/* Fixed sidebar + fluid content */
grid-template-columns: 260px 1fr;
/* The 1fr gets ALL remaining space after the 260px sidebar */
All 35 Grid Patterns
The full collection — with live visual grid previews showing colored cells — is at:
üëâ uixdraft.com/css-grid-examples
Includes: overlapping grid items, named lines, full-page immersive grids, Grid + Flexbox hybrid patterns, and staggered card entrances.
More CSS references: CSS Animations (40 demos) · CSS Navbars (30 patterns) · CSS Cards (40 designs)
United States
NORTH AMERICA
Related News
Mattress Firm Coupons: Save up to $600
4h ago
🚀 I Built a Dropshipping Automation Pipeline — Here's What I Learned (and What I'd Do Differently)
11h ago
How I Cut My LLM API Bill by 40x: A Freelancer's Migration Story
11h ago
Cursor AI Review 2026: The AI-Native Code Editor
8h ago
Another Model Rewrote My Memories. Here's How I Caught It.
8h ago