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.
In this lesson, you’ll learn:
Flexbox strengths
- Offers layout control in 1 dimension — either vertically or horizontally
- Allows adjustment of justification, alignment, gap, and wrapping
- Lets child elements override their layout settings (e.g., size, alignment, order)
- Can be applied to Collection lists or form blocks
Grid strengths
- Offers layout control in 2 dimensions — both vertically and horizontally
- Lets you organize elements anywhere inside the grid guides
- Allows manual positioning of grid children
- Lets child elements override their layout settings (i.e., position, spans, alignment, justification, order)
- Can be applied to Collection lists or form blocks
Quick Stack strengths
- Provides an efficient way to set up a layout
- Includes 8 preset Quick Stack layouts, which can be customized
- Cells provide preset div blocks to place content
- Combines grid and flexbox for faster building
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, alignment, and justification — 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
