Flexbox vs. Grid

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Flexbox vs. Grid

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.


Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form