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.
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;
}