Advanced Grids

When we built Knockout, it was important to keep adaptivity in mind. We'd explored frameworks that were more rigid, & we found them impractical for the work that we do. So we felt it was important to allow Knockout to conform to a given project.

Most of our projects require outer gutters, so we decided on a 14 column grid by default. (12 columns for content, & a 1 column gutter on each side.) But there are times when we might need a full width 12 column grid, or where we might need 12 columns for content but only half column gutters. These types of adjustments are easy to make in a traditional development environment, but in Webflow it requires a little more work.

What's key to understand is that the columns, padding, and margins in Knockout are, by default, relative to the 14 column grid. So a horizontal column is 1/14th of the screen, or 7.143 VW units. And <class>Margin Bottom - M<class> is also a single column of vertical spacing, 7.143 VW units. If we wanted to change the grid to a full width 12 column grid, all of the math would need updating to be based on column widths of 8.333 VW units, instead. (And <class>13 Col<class>, <class>14 Col<class>, <class>13 Col Tab<class>, <class>14 Col Tab<class>, <class>13 Col Mob<class>, and <class>14 Col Mob<class> would all need to be deleted.)

For half column gutters, the math would need to be divisible by 13, and then each page would need 3.846 VW units of padding on each side (1/26th of the viewport).