Learn how to structure your webpages with Boxes, Quick Stacks, Libraries, and style settings.
Layouts determine the overall structure of a webpage. You can build one from scratch, start with prebuilt elements, or reuse layouts from Libraries, then fine-tune it with style settings.
Layout elements
When you start designing your site, use layout elements to structure your designs. The Structure section of the Add panel includes:
To build a layout from scratch, use Boxes. Set a Box's tag to Section for a full-width page division, set a width on a Box to keep content centered, and set display to Flex to build a flexbox layout. A Box replaces the Div block, Section, Container, Columns, Grid, V Flex, and H Flex elements.
For a more ready-made layout, use the Quick Stack element. It uses CSS grid and has cells with preset vertical flexbox display settings. You can choose from eight presets when you add the Quick Stack, then customize the element and its cells. This lets you structure layouts faster than building them from individual elements.
If you want prebuilt layouts that include elements and CSS styling, use layouts in Libraries. You can get them from the Webflow Marketplace or the Starter Library.
Quick Stack works well for most layouts. If you need to build from basic elements instead (e.g., you don't want your design to use flexbox or CSS grid automatically), design with Boxes alone.
Adjust layout in the Style panel
You can also adjust an element's layout in the Style panel > Layout section. There, change the display settings (e.g., flexbox, grid) to customize your design.
Depending on the display setting you choose (i.e., block, flexbox, grid, inline block, inline, or none), more formatting options may appear in the Layout section. For example, if you choose flexbox, you can set the element to horizontal or vertical flexbox.
Best practices
Layout decisions are up to you, so try different methods and find the one you like best. For more guidance, here are a few tips for designing layouts efficiently:
- Use the Quick Stack element as a starting point for most layouts. It's versatile and ready to use, with common display settings (i.e., flexbox and CSS grid) already applied
- Use grid when you have a structured design along two dimensions, or when you want to set position settings on cells or overlap content
- Set flexbox on parent elements when you want a fluid design along one dimension
- Use Library layouts when you want prebuilt, styled layouts