CSS Flexbox & Grid: The Layout Guide I Wish I Had (2026)
CSS layout used to be a nightmare of floats and hacks. Flexbox and Grid changed everything. Here's the practical guide that makes layouts click.
Flexbox: One-Dimensional Layout
/* The core concept: flex container → flex items flow in ONE direction (row or column) */
/* Basic setup */
.container {
display: flex;
/* Main axis = horizontal by default */
}
/* Direction control */
.container {
display: flex;
flex-direction: row; /* Left → right (default) */
/* flex-direction: row-reverse; Right → left */
/* flex-direction: column; Top → bottom */
/* flex-direction: column-reverse; Bottom → top */
}
/* Alignment — the most important part! */
/* Main axis alignment (justify-content): Where do items go along the main line? */
.flex-row {
display: flex;
justify-content: flex-start; /* Start of line (default) */
/* justify-content: center; Centered */
/* justify-content: flex-end; End of line */
/* justify-content: space-between; Equal space BETWEEN items (no edges) */
/* justify-content: space-around; Equal space AROUND each item */
/* justify-content: space-evenly; ALL spaces equal (including edges) */
}
/* Cross axis alignment (align-items): Where do items go perpendicular to main line? */
.flex-row {
display: flex;
align-items: stretch; /* Stretch to fill (default) */
/* align-items: flex-start; Align to start */
/* align-items: flex-end; Align to end */
/* align-items: center; Center vertically */
/* align-items: baseline; Text baseline alignment */
}
/* For column direction, these SWAP:
- justify-content = vertical alignment
- align-items = horizontal alignment */
/* Item-level control with flex property */
.item {
/* flex is shorthand for: flex-grow flex-shrink flex-basis */
flex: 0 0 auto; /* Fixed size (don't grow/shrink) */
flex: 1 0 0%; /* Grow equally, don't shrink, start at 0% */
flex: 2 1 200px; /* Grow 2x, can shrink, starts at 200px */
/* Individual properties: */
flex-grow: 1; /* How much to grow relative to siblings */
flex-shrink: 0; /* Can this item shrink? (0 = no) */
flex-basis: auto; /* Initial size before growing/shrinking */
/* Self-alignment (overrides container's align-items) */
align-self: center; /* This item centers itself vertically */
align-self: flex-start; /* This item sticks to the top */
}
/* Common patterns: */
/* Navbar pattern */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.navbar-logo { margin-right: auto; } /* Pushes everything else to the right */
/* Card grid with flexbox */
.card-container {
display: flex;
flex-wrap: wrap; /* Allow wrapping to next line! */
gap: 1rem; /* Space between items (modern, no margins needed!) */
}
.card {
flex: 1 1 300px; /* Min 300px, grow equally if space allows */
}
/* Sticky footer */
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content { flex: 1; } /* Pushes footer down */
.footer { /* normal content */ }
/* Center anything (the holy grail!) */
.center-all {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
CSS Grid: Two-Dimensional Layout
/* Grid controls BOTH rows AND columns simultaneously */
/* Basic grid */
.grid {
display: grid;
/* Define columns and rows explicitly */
grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
grid-template-rows: auto auto; /* Two rows, height from content */
gap: 1.5rem; /* Row + column gap combined */
/* Or separately: row-gap: 1rem; column-gap: 1rem; */
}
/* The fr unit (fraction) — the game-changer */
.grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr; /* Column 1 is 2x wider than 2 & 3 */
grid-template-columns: repeat(4, 1fr); /* Shorthand: 4 equal columns */
grid-template-columns: 250px 1fr 150px; /* Fixed / fluid / fixed mix */
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr); /* Responsive minimum! */
}
/* Auto-fit/auto-fill — responsive without media queries! */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
/* Creates as many 280px+ columns as will fit.
When screen narrows, automatically drops to fewer columns.
No @media query needed! */
}
/* Placing items in the grid */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
gap: 1rem;
}
/* Method 1: Automatic placement (default) */
/* Items flow into cells in source order */
/* Method 2: Line-based placement */
.header {
grid-column: 1 / -1; /* Span all columns (from line 1 to last line) */
grid-row: 1 / 2; /* Row 1 only */
}
.sidebar {
grid-column: 1 / 2; /* First column */
grid-row: 2 / 4; /* Span rows 2-3 */
}
.main-content {
grid-column: 2 / -1; /* Columns 2 through end */
grid-row: 2 / 4; /* Span rows 2-3 */
}
/* Method 3: Named areas (most readable!) */
.layout {
display: grid;
grid-template-columns: 240px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
min-height: 100vh;
gap: 1rem;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
/* Method 4: Spanning */
.featured-item {
grid-column: span 2; /* Span 2 columns */
grid-row: span 2; /* Span 2 rows */
}
Real-World Layout Patterns
/* Pattern 1: Holy Grail Layout (header + 3-column + footer) */
.holy-grail {
display: grid;
grid-template: auto 1fr auto / 220px 1fr 200px;
grid-template-areas:
"header header header"
"nav main ads"
"footer footer footer";
min-height: 100vh;
}
/* Pattern 2: Dashboard grid */
.dashboard {
display: grid;
grid-template-columns: repeat(12, 1fr); /* 12-column system like Bootstrap! */
grid-template-rows: auto 300px 200px 200px auto;
gap: 1.5rem;
}
.stats-bar { grid-area: 1 / 1 / 2 / -1; } /* Full width, row 1 */
.chart-large { grid-area: 2 / 1 / 4 / 9; } /* Rows 2-3, cols 1-8 */
.table-panel { grid-area: 2 / 9 / 4 / -1; } /* Rows 2-3, cols 9-end */
.activity-feed{ grid-area: 4 / 1 / 5 / 5; } /* Row 4, col 1-4 */
.quick-actions{ grid-area: 4 / 5 / 5 / 9; } /* Row 4, cols 5-8 */
.notifications{ grid-area: 4 / 9 / 5 / -1; } /* Row 4, cols 9-end */
/* Pattern 3: Masonry-like gallery (CSS Grid + object-fit) */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
.gallery img {
width: 100%;
aspect-ratio: 1 / 1; /* Square images */
object-fit: cover; /* Fill without distortion */
border-radius: 8px;
}
.gallery .tall {
grid-row: span 2; /* Some items are taller */
}
/* Pattern 4: Responsive sidebar */
.responsive-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 2rem;
}
@media (max-width: 768px) {
.responsive-layout {
grid-template-columns: 1fr; /* Single column on mobile */
}
.sidebar { order: 2; } /* Sidebar moves below main on mobile */
}
Flexbox vs Grid: When to Use Which
┌─────────────────────┬──────────────────────────────┐
│ Use FLEXBOX when: │ Use GRID when: │
├─────────────────────┼──────────────────────────────┤
│ 1D layout (row OR │ 2D layout (rows AND columns) │
│ column) │ │
│ Content-first design │ Layout-first design │
│ (size doesn't matter)│ (explicit structure needed) │
│ Aligning items in a │ Overall page structure │
│ row/column │ Complex multi-row/col layout │
│ Navbars, footers, │ Dashboards, galleries, forms │
│ cards, lists │ Overlapping elements │
│ Component-level │ Page-level │
└─────────────────────┴──────────────────────────────┘
Pro tip: They work TOGETHER!
Use Grid for page layout → Flexbox inside each component for internal alignment.
What's your favorite CSS layout trick? What still confuses you about Grid or Flexbox?
Follow @armorbreak for more practical developer guides.
Top comments (0)