Quick Decision
One simple rule: Flexbox for one dimension, Grid for two. If you are arranging items in a row or a column, use Flexbox. If you need to control rows and columns simultaneously, use Grid.
1D layout?
→
Flexbox
→
2D layout?
→
Grid
Layout Decision Flow
1
Need layout
Start here
2
1D only?
Row or column axis
3
Flexbox
Perfect for one axis
4
2D needed?
Rows and columns together
5
Grid
Full two-axis control
Flexbox Basics
Flexbox distributes space along a single axis. It is ideal for navigation bars, button groups, and card rows where items flow and wrap naturally.
flexbox.css
/* Flexbox — one axis */
.nav {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
}
.card-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}flex-direction
row | column
justify-content
align along main axis
align-items
align along cross axis
flex-wrap
allow line wrapping
gap
space between items
flex-grow
expand to fill space
Grid Basics
Grid gives you precise control over both rows and columns at once. Use it for page layouts, dashboards, and image galleries where structural alignment matters.
grid.css
/* Grid — two axes */
.page-layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}grid-template-columns
define column tracks
grid-template-rows
define row tracks
grid-column
span across columns
grid-row
span across rows
auto-fill
responsive column count
minmax()
flexible track sizing
Side-by-Side Comparison
| Flexbox | Grid |
|---|---|
| One-dimensional (row or column) | Two-dimensional (rows and columns) |
| Content-driven sizing | Layout-driven sizing |
| Items flow and wrap naturally | Items placed on explicit tracks |
| Best for component-level layout | Best for page-level structure |
| justify-content / align-items | justify-items / align-items |
1D
Flexbox
Controls one axis at a time
2D
Grid
Controls rows and columns
Content
Flexbox strength
Sizing driven by content
Layout
Grid strength
Sizing driven by the grid
When to Combine Both
✓Use them together
The best layouts use Grid for the outer page structure and Flexbox for inner component layout. A Grid-based page shell can contain Flexbox navbars, card rows, and button groups nested inside — they complement each other perfectly.