Flexbox distributes items along one axis and lets them grow or shrink; grid places items in rows and columns at once. They overlap, but each has a clear strength: flexbox for a row or column that flows, grid for a layout that must align on two axes.
Before you start
You should be comfortable with display and box sizing. This article compares the two layout systems.
Step-by-step walkthrough
Step 1: Flexbox for one dimension
A flex container lays out its children along a main axis, with justify-content on the main axis and align-items on the cross axis. It shines for a toolbar, a card’s internal layout, or distributing space when items have unknown sizes.
Step 2: Grid for two dimensions
A grid defines rows and columns and places items into cells, which makes a page-level layout with aligned columns straightforward. grid-template-areas even lets you describe a layout visually, and items can span tracks without extra wrappers.
Step 3: Combine them
A grid for the page structure and flexbox inside each cell is a common and effective combination. Reach for grid when you need track alignment and flexbox when you need to distribute along one axis.
Worked scenario
Grid defines columns; flex aligns within a cell.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 16px;
}
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
}Walk through the example
The grid creates a fixed sidebar and a flexible main area with a gap between them. Inside, the toolbar is a flex row that spreads its items to the edges and centers them vertically. Each system does what it is best at.
Common mistake
Building a full page layout with nested flex containers, which leads to fragile alignment, or forcing a simple single-row toolbar into grid, which adds complexity for no benefit.
Verify the behavior
Resize the viewport and confirm the grid columns adjust and the flex toolbar stays aligned. Inspect computed tracks to confirm grid sizing. Test with a different number of toolbar items and confirm flex distributes them.
Interview exercise
When is grid the better choice than flexbox?
Answer and reasoning
When items must align across both rows and columns, such as a dashboard grid or a page layout with aligned columns, because grid controls both axes and allows spanning. Flexbox controls only one axis well. For a single row or column where items just need to grow, shrink or space out, flexbox is simpler.
Continue learning
Compare sizing in CSS grid sizing and box model in Cascade, specificity, box model. Read the MDN CSS layout guide and try the HTML and CSS interview questions.