The column element and the Webflow grid
Have you ever noticed how designing with the container element and DIVs differs from designing with the column element and DIVs? That's because the column element takes the grid into account by default.
To see how, let's drop a column element into our container:
See how it begins in the middle of the gutter, 10px before the container above? The thing is, we placed this column inside a container, and yet it begins outside it How does that work?! To see, let's give the row a class and check out its default properties.
Did you see it? The rows within a column element have -10px margins left and right by default. And the columns?
The columns come with a 10px padding left and right. So there we have it: our container wraps around the gutters and our content starts on the grid exactly.
Flexbox and the Webflow grid
The columns element is powerful because of the layout control it offers, plus, you get options for how it will behave at different breakpoints.
Now, you've probably heard that flexbox gives us another way to deal with columns, and since it's pure CSS, it's even better for responsive design. And if you want that third column in your three-column layout to appear first on mobile, just set it to reverse order and voilà! Amazing.
But flexbox containers aren't well-equipped to deal with the grid by default.
They don't account for the grid and the gutters. They always start right where you put them, just like a standard DIV. So you can't just drag a container in, set it to display: flex, and start nesting divs like they were columns. Especially if you want the columns to have a visual representation, like a colored background or visible border.
(Oh, and forget using containers with display: flex, because you can't alter their margins, even by adding a class. Use DIVs.)
Here’s a flex div inside a container.
Let's put two 160px-wide divs inside like they were columns.
Doesn’t quite work. My first div should be 10px thinner, and then I won't be able to style its background like the following one. This wasn't the case when we used a column element.
So let's do to the flex element what Webflow does with columns: unwrap it from the grid with a -10px margin left and right.
There we go! We now have a flex container with divs acting as columns inside. One unique class for those DIVs and they're always in the grid. We can now use them as columns.
Why is having a unique class important? For maintenance, simplicity, and most importantly, for working with the CMS. When you're dealing with elements in a Dynamic List, you don't have the luxury of adding special classes to the first and last element to account for the grid. You want a solution that works all the time, in all cases.
The grid matters. And Webflow gives us all the tools we need to deal with it. Start by activating the grid overlay and leaving it on all the time. If you don't, you'll stick with giving elements spacing values that adhere to no underlying logic.
Open your past projects, activate the grid overlay, and see how you can improve their layout. Everything should be aligned to the grid, from lengthy text blocks to small buttons. By using the grid, you’ll allow yourself to leave big chunks of layout unused, for breathing space. Breathing spaces only work when they fit the grid.
And by working with the grid, you have a reason to put things where they are. That way, it's much easier to answer questions from your client, and to stand behind your design choices.