Using Flexbox vs. Grid vs. QuickStack on WebFlow

Introduction

Creating the layout/display of a website is the first and arguably one of the most important phases of creating a website, whether you choose to design your site in a Minimal style, Maximalist style, Tech style, or even a Fashion style, when it comes to developing your site you’ll have to make use of a form of display in Webflow, whether it be Block, Flex, Grid, In-line Block, In-line, or None.

Each of these various forms of display in webflow is useful but not every each one has to be used at all times. In a lot of cases, people make use of Flexbox, in some cases people make use of Grid and in some cases, people make use of QuickStack.

In this guide, we'll explore how and when to make use of Flexbox, Grid, and QuickStack.

Display Flex

This is a layout that can be applied to Div Blocks, Link Blocks, and many more. Elements set to display flex do not automatically fill up the available space within its parent element and by default are set to a horizontal direction (this means by default that any content put in it will be set side by side).

Some features of the display flex are:

• It allows you to space out the content in it in many different ways e.g. making all the content to be at the right or at the left, at the top or at the bottom.
• It allows you to make use of Gaps; these gaps can be set horizontally, vertically or both can be synced. Gaps mean that you don’t always have to give all your elements a margin or padding and can instead make use of the gap that has been set on a parent to space content from one another.
• It allows you to make use of Wrap which when properly used with gaps helps your site in its responsiveness. Example: Some content in a Div that has been set to display flex is set to a horizontal direction in desktop view but can also take up a vertical direction on smaller screens.

Display Grid

This is the layout that can be used when you want to create a sort of grid-style design, for example maybe you want to have a section for displaying blog posts on a page, you can make use of a grid to accomplish this, as a grid will allow you to determine the amount of content you want to show in a row(horizontal direction) or in a column (vertical direction).

Some features of the display grid are:

• Grid allows you to set how much content you want on a row or a column.
• Elements inside a grid can span multiple columns or rows without that span being shared by all other elements with the same class name.
• Grid allows you to use gaps much like how Flexbox does.

QuickStack

A QuickStack is essentially a grid that has already been given children elements that act as Divs in which you can put content. In a way, you can consider a QuickStack as a close relative to Grid.

Quckstacks come with presets which means that you don’t in each case have to set the span of your Div Blocks which is what you would have to do if you made use of Grid.

Though we mentioned that QuickStack is a close relative to Grid, it should also be mentioned that though QuickStacks come with presets they are not as robust and cannot be as customized as a standard grid.

Some features of QuickStack include:

• QuickStack comes with Grid-like presets which can save you a lot of time.
• QuckStack comes with cells that act as Divs in which you can put content (for each new column or row you add a cell is created in which you can put content).
• Quick stack allows you to also make use of gaps similar to how Display Flex and Display Grid make use of it.

Conclusion

Whatever layout/display you choose to use in Webflow is up to you, however making use of the wrong one can either make your design not look as good as it could and consume a large amount of your time customizing it.

When choosing your layout/display it is important to consider the needs of your designs and to also consider the scalability of your design as you develop it.

‍