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.