For some designers who don't know how to code, using Webflow is the first time that they have been given the keys to be able to develop websites from scratch. Without knowing the best practices, it's inevitable that this can turn into a recipe for disaster.
Websites that are built around a consistent system help keep them responsive on all devices, speed up the time taken to develop new pages, and make it faster to debug and add to as a company grows.
Starting without a blueprint of how the content is structured can lead to a website becoming messy fast. A common cause for this is when a website is developed to look right on desktop, but without factoring in how that design is going to change for different device screen sizes.
No matter how much your website is tuned to reflect your target customers, if your website is not initially built from a stable system, it's going to become harder and harder to manage.
Starting with Sections
All websites are built with sections that fit perfectly one on top of the other, like the different floors of a building. Commonly, sections are split with a change in colour, change of layout, or just a large gap of space to indicate a separate idea. Building using sections makes it quick and easy to rearrange the order of content on a page.
When using Webflow, you can drop a section element into your project and give it a class of "Section", so that you can style it when needed. You can also give it some top and bottom padding, so the content inside isn't rubbing up against the edges. Alternatively, you can add some breathing room using spacers, which I will go into detail about later on.
It's a good practice to set up combo classes of the different coloured sections you are planning to use throughout your website, such as "Green", "Light Grey", and so on. This means you can quickly add or change the colour of a section at any point when you're building new pages.
Adding Containers
Modern websites are built for the content to respond to any and all different device screen sizes. However, when a screen size gets too big, you don't want to have to develop a completely different layout where the content always stretches to the edge.
This is where containers come in. Containers create a limit of how wide the content can get. It means that on large screen sizes, it will still use the same design and layout as the regular desktop size.
You can either use Webflow's default containers, or if you want a different maximum width then you can add a blank div, give it a max width of your choice (around 1200px is common), and set left and right margins to auto, which will center it in the middle of the page.
Adding some left and right padding will then give the content some space on the edges when a screen size is smaller than the max width. Usually it will be around 30-40px on each side for desktop and tablet, and 15-20px on mobile, but you can adjust this to what suits your design best.
The 12 Column Grid
Webflow has a range of in-built elements that can be used for a variety of different layouts. The problem with this lies in the fact that often, designers using Webflow will build new layout styles each time they create new sections. This means that no classes are reused, and to update a page you have to individually go through every single element in each section.
To combat this, I use the same layout for 90% of the sections I build. This makes it faster for me to build new sections, adjust for different screen sizes, and explain to my clients the system used throughout the website.
This layout is the 12-column grid, the same grid used for Bootstrap websites. It makes it easy to align everything in a clean and precise way across a website. It also becomes effortless to convert a design on Figma or Sketch for development if you’ve designed off of a 12-column grid.
Earlier I mentioned spacers as a way to add breathing room. The idea is simple: instead of giving every element its own margin and padding, decide on a small set of spacing values and reuse them everywhere. A common approach is a scale built on a base unit, such as 8px, giving you steps like 8, 16, 24, 32, 48, 64 and 96. When every gap on the site comes from the same scale, the layout feels deliberate even before the visual design is applied.
In practice there are two reliable ways to apply it in Webflow. You can use padding on sections and containers for the large vertical gaps, and a spacer div with a combo class for each step on the scale (for example "Spacer 24") between elements. Or you can use a wrapper with a gap between its children. Whichever you pick, avoid adding one-off margins to individual headings and paragraphs, because they are the hardest to find and fix later. Remember to reduce the large values on tablet and mobile, where a 96px gap that looks balanced on desktop will feel like a hole on a phone.
Name Everything Consistently
A sensible structure is only useful if other people can understand it. Use clear, predictable class names for sections, containers, columns and spacers, and keep to the same pattern on every page. I explain a full system in my guide to Webflow naming conventions, and the same thinking applies to your design system, which is where you record the colours, type styles, buttons and spacing that the structure relies on.
Plan the Responsive Behaviour
Webflow is desktop-first, so styles you set at the desktop breakpoint cascade down to tablet and mobile unless you override them. That means the structure you build on desktop is the structure you inherit everywhere, so it needs to be able to stack. Some habits that help:
Build with flexbox or grid and let content wrap, rather than positioning items by hand.
Use percentages and max widths instead of fixed pixel widths where possible.
Decide in advance how every multi-column section will stack on tablet and mobile, and whether the order needs to change.
Check each breakpoint as you build each section, instead of leaving it to the end.
Test on a real phone as well as in the Designer preview.
The 12-column system I described above makes this easier, because each column can change width at each breakpoint with a combo class. If you want to see exactly how to set it up, read my Webflow column system for more flexibility.
Set a Type Scale
Typography is part of structure too. Choose a small set of heading and body sizes and set them up as base styles on the heading and paragraph tags, instead of styling each element separately. Keep heading tags in a logical order for accessibility and SEO, and use classes for the occasions when you need a heading to look smaller or larger than its tag suggests. Using relative units such as rem for font sizes lets text respond to a visitor's browser settings.
A Checklist for Every New Page
Start with a section, and give it the right colour combo class.
Put a container inside it with the standard max width and padding.
Lay out the content using your column system or the built-in grid.
Use the spacing scale for every gap.
Reuse existing classes before creating any new ones.
Check all four breakpoints.
Make sure there is one H1, the headings are in order, and images have alt text.
If you build this way, adding a new page is mostly a matter of assembling sections you already have. It also makes handing the site to a client or another developer much easier. I cover that process in how to hand off Webflow websites to clients.
Frequently Asked Questions
Why does website structure matter before you start designing in Webflow?
Starting without a consistent system for sections, containers, and classes leads to a site that gets progressively harder to maintain as it grows — fixing structural problems after dozens of pages already exist takes far longer than setting up the system correctly from the first page.
What's the difference between a section and a container in Webflow?
A section is a full-width block used to divide a page into distinct areas, often marked by a color or spacing change. A container sits inside a section and limits how wide the content itself can stretch, so a page keeps a readable, consistent layout even on very large screens.
How do combo classes help with structuring a Webflow site?
Setting up combo classes for section variants, such as a base "Section" class plus color combo classes like "Green" or "Light Grey", lets you reuse and restyle sections consistently across a site instead of rebuilding styles from scratch on every new page.
What's the most common structural mistake in Webflow builds?
Designing a page to look right on desktop first without planning how it degrades on smaller screens. Structure and responsiveness need to be considered together from the first section you build, not added retroactively once the desktop layout is finished.
What spacing system should I use in Webflow?
Use a consistent scale based on a base unit such as 8px, apply large gaps with section padding and smaller ones with spacer classes or gaps, and reduce the larger values on tablet and mobile.
How wide should a container be?
Around 1200px is common for the maximum width, with 30-40px of side padding on desktop and tablet and 15-20px on mobile, but adjust it to suit your design.
Written by
Nikolai Bain
I'm a Webflow Premium Partner based in Wellington, New Zealand, with years of experience designing and developing websites for clients across the UK, EU, US, AU, and NZ. I specialize in Webflow migrations and SEO, helping businesses move from WordPress, Squarespace, and custom-coded sites to Webflow without losing search rankings. I share what I learn through in-depth guides and templates to help others get more out of Webflow.
