Flexbox vs Grid: which should you use?
Compare a wrapping Flexbox row with a CSS Grid. Choose a starting point based on the relationship between your items.
Start by asking what needs to line up. A navigation bar often needs items to sit beside each other with sensible spacing. A collection of cards may need consistent columns across several rows. Those are different layout decisions.
Use Flexbox to distribute a group of items
Flexbox works along a main axis. It suits a row of controls, a navigation group, or a stack whose items share space. Wrapping is useful, but each flex line distributes its own space; items on separate lines do not automatically share column tracks.
.actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}Use Grid to describe tracks
Grid lets you define rows and columns. For a card collection, the following rule creates as many columns as fit, with a minimum width of 180 pixels. Each available track shares the remaining space.
.cards {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 180px), 1fr));
gap: 16px;
}The inner min() keeps the minimum track width from exceeding a very narrow container. This is useful when the component can appear in places smaller than a typical phone viewport.
You can use both in one component
A page can use Grid for its card collection and Flexbox for the action row inside each card. Choose a layout for the relationship it needs to express.
Open the Flexbox lesson, add a fourth item, and change the preview width. Then compare it with the Grid lesson. Look at what happens to alignment on the second row.
Further reference: MDN Web Docs ↗
Try the editable example ↗