Install any 12-column guide you like
You're not locked in to the standard 960 grid that's built into Webflow. Here's how to use any custom 12-column grid you you might prefer:
- Prepare a grid using Illustrator, XD, Photoshop, or any app capable of exporting a simple column grid. I prefer .svg for accuracy and clarity, but a .png or similar is fine. This example uses a 1240-pixel wide .svg file with 85-pixel columns and 20-pixel margins.
- Name your grid to match (e.g. 12-col_85-20.svg) and add a body class to your webflow page (e.g. "guide"). Import and install the grid into the page background for your body class as shown here in image 1. Be sure to specify the width as 1240 (or whatever you're using) and center that background. See Image 1.
- Make sure you have guides turned off in the dropdown menu at the top (hidden behind the pixel dimensions). See Image 2.
- Now make a new class for your containers that matches the grid you created. I called mine 1240. Set the Max Width to match your new grid (1240 pixels). See Image 3.
That's it. You can drop webflow's column tool into your new containers and they will divide along your column guides. If you want to hide the grid (especially when you're ready to publish), just remove the body class. You can also hide it in the Page backgrounds panel, but you'll have to re-center it if you decide to show it again.
Note: you'll have to develop separate grids for smaller viewports. I didn't do that in this example, but you'd just install different backgrounds on the custom container for whichever viewports you want to customize.
Note2: Unlike Webflow's native grids, these are in the background. I realize that's not quite as useful, but it works fine for me. If you really want an overlay grid, you could create a Div block that sits on top of everything—but I think it would get in the way of accessing page elements for most workflows.
