My Webflow Column System for More Flexibility

Resolving the limitations of Webflow’s built-in columns to maximise it’s potential to your website’s needs.

Webflow has plenty of built in sections that are brilliant for web developers who come from a design background rather than a development background.

The process of building a beautiful website without code has become a breeze, but there is one major problem with the current Webflow system: the built-in columns element.

The simplicity of the column element is its very downfall.

There is not enough flexibility to bend the columns to exactly what you need across screen sizes, so you might start building with columns, and then realise you can't build the design you need.

There is also no option to change padding between columns, meaning you have to add padding to any and all elements within a column so that content in the different columns isn't rubbing up against each other.

The best way to work around this for better columns and more complex layouts is to set up our own column layout.

‍

‍

‍

The 12 Column Grid

The layout I recommend using 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 and across different screen sizes.

It also makes it easier to convert a design to the web if you're designing off of a 12 column grid in a programme such as Figma.

The layout works by using classes for each column size, so you can create hundreds of different layouts within the 12 columns by using different column combinations.

Here is the 12 column layout used for a feature section, with a 5-Column for the text, 1-Column for the gap, and 6-Column for the illustration. You'll want to initially set up the columns with a "desk" or "desktop" class, so that you can change the size of the columns for tablet and mobile by adding on other classes.

This is an example of what your classes might look like to change the size of the column across screen sizes. This column will fill 6-columns on desktop, 8-columns on tablet, and 12-columns on mobile.

Once you have the system set up, it’s extremely easy to work it into the layouts you need to build. Let’s learn how to set up the system now.

Building the 12 Column Layout

To start, create a div and give it a "12 Columns" class (or "12-column-row", or however you prefer to format your classes). Then add a negative margin of -16px on both the left and right of the element. This makes it so when we add our columns in, we can give it a 16px margin and everything will line up, whilst having plenty of space between columns.

Set your "12 Column Row" class to horizontal flex-box with wrap turned on. This is so if you go over 12 columns, it will be pushed to a new line.

‍

Setting up a Column

Next you want to set up all the columns that go inside the 12 column row. Create a div and give it a "Column" class, and give it a 16px left and right margin that I mentioned earlier. You can make the initial width any size, but we are going to add combo classes to override how wide an element is.

You can name your combo classes in any format, but I would recommend "Desk-1", "Tab-1" and "Mob-1". The name defines what screen size it's for, and the number defines how many columns the element takes up.

Let's start by adding on a Desk-1 class so we can style for desktop.

We want to add in how wide the element is. If we want everything to fit into 12 columns, we can work off a percentage based system. So 100% of the row, divided by the 12 columns, multiplied by how many columns the element takes up.

100% / 12 * 4 would take up 4 columns, and equal 33.33%.

100% / 12 * 1 would take up 1 column, and equal 8.33%.

Once you've set up these columns, you can start to use them to create different layouts.

For example, a layout for a section could look like Desk-2, Desk-8, Desk-2. This adds up to the 12 columns and will perfectly fit within that row.

Working across different screen sizes

If we want the column size to change across screen sizes, such as for tablet and mobile, then we can add combo-classes onto our class.

Change the screen size to "tablet" at the top, and then add on a combo class for tablet with the appropriate column number.

Now all we need to do is adjust the width of the div to reflect the new size we want. In this case, it's 66.66% (100 / 12 * 8)

Let's finish this column off by changing to "mobile landscape" screen size from the top, and then add on another custom class for the new column size. Then adjust the width again to reflect the new size.

And that's the whole set up! As it can take a while to add all of these combo classes for each column size, you can always leave the full set-up, and only add-on the classes when you're building them.

Summary

Though it might initially sound more complex than you might be used to with the ease of working with Webflow, this system is well worth the effort of setting up and getting comfortable with.

By using the custom 12 column layout alongside the built-in grids, you'll have an unlimited supply of different layouts you can work with to build great websites.