Flexbox vs Grid: which should I use?
Use flexbox for a single row or column where content sizes itself. Use grid when you need rows and columns together, or when you want to define the layout up front.
#Flexbox: content-out
The items decide their own size and flexbox distributes what is left. Ideal for a navbar, a button group, a card footer, a row of tags.
.nav {
display: flex;
align-items: center;
gap: 1.5rem;
}
.nav__spacer { margin-left: auto; } /* push everything after it right */#Grid: layout-in
You define the tracks and the items fill them. Ideal for page shells, card galleries, forms, anything that should line up across rows.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}That single line is responsive with no media queries: as many equal columns as fit, each at least 280px.
#The practical tell
If you are reaching for percentage widths and flex-basis maths to make things line up, you want grid. If you are fighting grid to let one item size to its content, you want flexbox.
They nest happily — a grid of cards where each card's footer is a flex row is completely normal.
#gap works in both
Before gap, spacing children meant margins plus a :last-child rule to remove the final one. gap puts space between items only. Never fake it with margins again.