CSS Flexbox vs Grid: When to Use Each (With Examples)

Understanding CSS Flexbox vs Grid is one of the biggest layout milestones for any new front-end developer. Flexbox and CSS Grid are the two modern tools for building layouts on the web, and beginners often wonder which one to use. The short answer: use Flexbox for laying things out in a single direction, and Grid when you need rows and columns at the same time. This guide makes the difference click with simple rules and real examples.

The one-sentence rule

Flexbox is one-dimensional (a row or a column). Grid is two-dimensional (rows and columns together). If you are arranging items along a single line, reach for Flexbox. If you are placing items into a structured grid of areas, reach for Grid.

When to use Flexbox

• Navigation bars and button groups
• Centering a single element vertically and horizontally
• A row of cards that should wrap as space runs out
• Spacing items evenly with space-between or gap

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

When to use Grid

• Page layouts with a header, sidebar, content, and footer
• Image galleries and card grids with equal columns
• Any design where items line up in both rows and columns
• Responsive layouts using minmax and auto-fit

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

That single Grid rule creates a responsive card layout that automatically fits as many columns as will comfortably fit, with no media queries required.

They work great together

You do not have to choose one forever. A common pattern is Grid for the overall page structure and Flexbox inside individual components, like aligning an icon and label within a card. Using both is normal and often the cleanest solution.

Common mistakes

• Forcing a two-dimensional layout out of Flexbox with lots of fixed widths.
• Using floats or absolute positioning where Grid would be simpler.
• Reaching for margins to space items when gap is cleaner.
• Adding media queries everywhere instead of using auto-fit and minmax.

Quick decision checklist

• One row or one column? → Flexbox
• Rows and columns together? → Grid
• Component-level alignment? → Flexbox
• Page-level structure? → Grid
• Responsive cards with no media queries? → Grid auto-fit

Conclusion

Flexbox and Grid are not rivals; they are partners. Once the one-dimensional versus two-dimensional rule sticks, choosing becomes second nature. Practice by rebuilding a layout you like with each tool. For deep references, see MDN’s Grid guide and the classic CSS-Tricks Flexbox guide.

Stuck on a tricky layout? Send me a message and we will untangle it.