Building web layouts

Layouts determine the overarching structure of a website page. There are many ways to build website layouts — from scratch, with prebuilt elements, or even by using reusable layouts from Libraries. And you can further customize your site’s layout using style settings.

In this lesson, you’ll learn about:

1. Layout elements
2. How to adjust layout in the Style panel
3. Best practices

Layout elements

When you start designing your site, you’ll want to use layout elements to structure your designs. There are 5 structure elements in the Add panel:

• Section
• Container
• V flex
• H flex
• Quick Stack

If you want to build layouts from scratch, sections and containers let you create a simple structure where you can add other elements.

V flex and H flex are useful elements to include within sections and containers. V flex is a div block that uses preset vertical flexbox display settings and H flex is a div block that uses preset horizontal flexbox display settings. These let you design flexbox-based layouts more efficiently.

If you want a more ready-made layout, you can use the Quick Stack element. The Quick Stack element uses CSS grid and has cells made of div blocks that use preset vertical flexbox display settings. You can choose from 8 presets when adding the Quick Stack to your site, then customize the element and its cells as needed. This simplifies your building workflow and lets you structure layouts faster than building them from individual elements.

Additionally, if you want prebuilt layouts that include elements and even CSS styling, you can use layouts in Libraries. These can be accessed from our Webflow Marketplace or from the Starter Library.

We recommend you use Quick Stack for most layouts to streamline your design workflow. However, if you need to build the layout from basic elements (e.g., if you don’t want your design to automatically use flexbox or be structured with CSS grid), you can design with just sections, containers, and div blocks.

How to adjust layout in the Style panel

You can also adjust your element’s layout via the Style panel > Layout section. There, you can adjust the display settings (e.g., flexbox, grid, etc.) to elements to further customize your design.

Depending on which display settings you choose (i.e., block, flexbox, grid, inline block, inline, or none), additional formatting options may appear in the Layout section. For instance, if you choose flexbox, you’ll be able to adjust whether you want your element set to horizontal or vertical flexbox.

Best practices

Ultimately, your layout design decisions are up to you — and we recommend you try different methods and find the one you like best! But if you want a little more guidance, we’ve put together a few tips and tricks for designing layouts efficiently:

• Use the Quick Stack element as a starting point for most layouts. This element is versatile and ready-to-use, with some of the most common display settings (i.e., flexbox and CSS grid) already applied
• Use grid when you have a structured design along 2 dimensions but you also want to set position settings on cells or have content overlap other content
• Set flexbox on parent elements when you want a fluid design along 1 dimension
• Use Library layouts when you want prebuilt, styled layouts