Columns

The viewport-based column suite is best for defining layouts that shouldn't adjust relative to their parent, but instead to the size of the viewport. The benefit of this approach is that your columns will always land on grid. So these classes are ideal for any unique layouts.

Tip: A combination like Column 6 Col Center Element will use auto margins to center the div, creating the illusion of left/right padding.

Tip: Because the browser scrollbar can cause 20px of horizontal scroll when using 100vw in some browsers, it's important to use Auto Col, Auto Col Tab, or Auto Col Mob for the last column when using the VW set.

The percentage-based column suite is best for sizing repeating elements, & are sized relative to their parent. For instance, a 3up card-based layout might need to nest inside 14 columns, 12 columns, or even 10 columns depending on the padding of its parent, so these columns will flexibly adjust. Consequently, these columns may not always subdivide on grid, but that's generally fine for these use cases.

Tip: The padding offset suite (below) allows percentage-based columns with gutters to land on grid by offsetting the inner padding with negative margin.

Margin offsets are used to align repeating elements with gutters to the outer grids by offsetting the padding with negative margins. For instance, suppose you want a 3up card layout with a 1 column of gutter in between the cards. You would accomplish this with a half-column of left- and right-padding within each card, but that would also inset your first & last card by a half column. So you would apply a half column negative margin to the parent in order to offset the padding.

There are two visual grids that can be toggled off & on as background images at the Body (All Pages) level: one for dark backgrounds & the other for light. These grids stop expanding at 1920, just like the grid suites, & will allow you to check alignment. The grid can also be applied to Sections with the Grid - Light Grid - Dark.