Flexbox vs grid vs Quick Stack

Updated

Learn the similarities and differences between the Webflow Quick Stack element and CSS display properties like flexbox and grid.

When you’re designing websites, you have many options for structuring your site’s layout — by using Webflow elements and CSS display properties. Flexbox and grid are commonly used display properties and Quick Stack is a Webflow element that combines both. Here, we’ll walk through when to use flexbox, grid, and Quick Stack in your designs.

Flexbox strengths

  1. Offers layout control in 1 dimension — either vertically or horizontally
  2. Allows adjustment of alignment, gap, and wrapping
  3. Provides align box controls to quickly align flex children
  4. Lets child elements override their layout settings (e.g., size, alignment, order)
  5. Can be applied to Collection lists or form blocks

Learn more about flexbox.

Grid strengths

  1. Offers layout control in 2 dimensions — both vertically and horizontally
  2. Lets you organize elements anywhere inside the grid guides
  3. Provides align box controls to quickly align grid children
  4. Allows manual positioning of grid children
  5. Lets child elements override their layout settings (i.e., position, spans, alignment, justification, order)
  6. Can be applied to Collection lists or form blocks

Learn more about grid.

Quick Stack strengths

  1. Provides an efficient way to set up a layout
  2. Includes 8 preset Quick Stack layouts, which can be customized
  3. Cells provide preset div blocks to place content
  4. Combines grid and flexbox for faster building

Learn more about Quick Stack.

Should I use flexbox, grid, or Quick Stack?

We recommend you start with the Quick Stack element for most layouts. This element is versatile and ready-to-use, with some of the most common display properties (i.e., flexbox and grid) already applied. There are some limitations, though. Quick Stack doesn’t let you shift around or overlap cells like grid does, and you can’t apply Quick Stack to another element since it’s a prebuilt element with layout styles already applied.

It’s best to use grid when you have a complex 2 dimensional design where you want to set position settings on child elements — for instance, if you want elements to overlap. Unlike Quick Stack, grid is more flexible and allows you to move cells around within the grid. Grid is also a display property — not an element — so you can set grid on other elements, like containers, divs, form blocks or Collection lists.

Flexbox is a useful display property when you want to control your layout in just 1 dimension. Like grid, you can set flexbox on other elements, like containers or divs. Flexbox offers many other layout options — such as direction and alignment — and allows you to wrap child elements, so child elements continue onto the next line when they hit the edge of the parent element.

Takeaways

  • For 2 dimensional design, grid is more versatile while Quick Stack is more efficient
  • You can set grid on other elements as a display setting, while Quick Stack is a prebuilt element with display settings already applied
  • Flexbox is great for 1 dimensional design