Flexbox vs. Grid

Learn the similarities and differences between flexbox and CSS Grid so you know what to use and when.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

The similarities and differences between the tools — what to use and when.


In this lesson:

  1. Flexbox strengths
  2. Grid strengths
  3. But which should I use — Flexbox or Grid?

Flexbox strengths

  1. Layout control in 1-dimension, vertically or horizontally
  2. Adjust justification and alignment
  3. Override alignment for child element settings


Grid strengths

  1. Layout control in 2-dimension, vertically and horizontally
  2. Organize elements anywhere inside grid cells
  3. Adjust positioning 
  4. Override alignment on child element settings

But which should I use — Flexbox or Grid?

  1. Grid is great If you can break your design into a grid
  2. Flexbox is great if your design spans either horizontally or vertically
  3. Grid allows for breakpoints in responsive design
  4. Grid and Flexbox are both excellent tools
  5. Pick the tools that best suit what you’re trying to build


For more on Grid, check out Grid 2.0 layouts in Webflow.


Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback