Combining Flexbox and Grid
Use Grid for the macro page layout and Flexbox for component-level alignment, knowing when each tool is the right choice.
Combining Flexbox and Grid is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
They Are Complementary Tools
Flexbox and Grid are not rivals — they're designed to work together. The typical pattern: use CSS Grid for the macro page structure, then use Flexbox inside each grid area to arrange the component's contents.
Page Layout with Grid, Components with Flex
Define the high-level page skeleton with Grid. Inside each grid area, use Flexbox for component-level arrangement: nav links in a row, card content in a column.
/* Page skeleton */
body {
display: grid;
grid-template-areas: 'header' 'main' 'footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Component inside grid area */
header {
display: flex;
justify-content: space-between;
align-items: center;
}Card Grid Pattern
The classic pattern: Grid for the card layout, Flex for each card's internal layout. This ensures cards align on the grid while their internals (image, title, body, footer) stack correctly.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
}
.card-body { flex: 1; } /* push footer down */Nav Bar Pattern
A common nav bar combines both. The nav itself is a flex container for logo and links. The links section may be another flex container. A mega-menu might use Grid for multi-column layout.
Holy Grail Layout
The 'Holy Grail' layout (header, three-column middle, footer) is trivially done with Grid today. The three columns — left sidebar, main, right sidebar — are Grid columns; content inside each uses Flexbox.
.page {
display: grid;
grid-template:
'header header header' auto
'left main right' 1fr
'footer footer footer' auto
/ 200px 1fr 200px;
min-height: 100vh;
}Centring Anything — Grid or Flex
Both Grid and Flexbox can perfectly center content. Grid: place-items: center (shorthand for align-items + justify-items). Flex: justify-content: center; align-items: center.
.center-grid {
display: grid;
place-items: center; /* centers both axes */
min-height: 100vh;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Responsive Sidebar Layout
Mobile: single column (nav on top). Tablet+: sidebar + content side by side. Grid makes this declarative — change template-areas in a media query.
Icon + Text Pattern
A very common micro-layout: an icon beside text. Flexbox is perfect for this because it's a single row with alignment.
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }When to Choose One
Grid when: you think in rows AND columns, when you need items to align across tracks, when you're building a page skeleton. Flex when: you think in one direction, when items should shrink and grow, when you're arranging a row of buttons or a stack of items.
Don't Over-engineer
Sometimes a simple block element with max-width and margin: auto is better than a complex grid. Not every layout needs Grid. Use the simplest tool that does the job.
Debugging Layout Issues
In DevTools: click the grid/flex badges in the Elements panel to overlay the grid lines or flex item outlines. This makes invisible layout structure visible and is invaluable for diagnosing misalignment.
Quick Check
Which combination of layout tools is most common for page-level and component-level layouts respectively?
Recap: Combining Grid and Flex
Grid and Flexbox are complementary. Use Grid for two-dimensional page structure. Use Flexbox for one-dimensional component internals. place-items: center on a grid centers everything. flex-direction: column + flex: 1 on card body pushes card footers down. Debug with DevTools overlay badges.
Frequently asked questions
Is the “Combining Flexbox and Grid” lesson free?
Yes — the full text of “Combining Flexbox and Grid” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Combining Flexbox and Grid”?
Use Grid for the macro page layout and Flexbox for component-level alignment, knowing when each tool is the right choice. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Combining Flexbox and Grid” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.