Columns
In the VW Grid, a column is a constant unit of measure. The width of a column is dynamic, but always between a fixed range. Columns will never get too large or or too small. As the viewport get smaller, and the columns near the bottom of their range, VW Grid will simply put less columns on the page. By default, large screens hold 24 columns, medium medium-sized screens hold 12, and small-sized screens hold 6. VW Grid will fold columns at these breakpoints. That means an element that is 3 columns wide will always be 3 columns wide, no matter how big or small the screen.
On large screens, 3 columns out of 24 is proportionally a small peice of screen real estate. On Phones, VW Grid will still leave the element at 3 columns wide -- only now it's proportionally more real estate, as 3/6 columns is more significant than 3/24.
Responsive Columns
The width of elements can be explicitly defined for breakpoints where columns would normally fold by default. This can be done with the small-column-n and medium-column-n classes. For example, .column-12 would default to the full 12/12 column width at a tablet size. Adding to the same element .medium-column-6 would prevent the default behavior, and at a tablet viewport, the element would be 6/12 columns.
Nested Columns
Contrary to other flexible-width grid systems, VW Grid columns do not change behavior when nested. Because a column is a constant measurement relative the size of the viewport, nested columns still span the same width as their non-nested counterparts. An element with .column-6 nested within an element with .column-12 is the same size as an un-nested .column-6. Further, clearing of the column-gutter is taken care of for you with :first-child and :last-child psuedo-selectors on all column classes.
Column-folding behavior is almost entirely automatic with Viewport Grid. The only exception is gutter clearing behaviors on deeply nested items after column folding occurs - in some situations we can not know what columns are now first or last in their rows. This will cause the column to be inset from the edge of the container. The example below solves this by introducing first-column classes, along with medium-first-column and small-first-column.
In this example, the more transparent the blue, the deepter the column is nested. There are four levels of nesting in this example.
Using Column-24 as a Row
Because columns can now be nested without changing their behavior, we don't need rows, really. However, you still may find that a tall, narrow column with a short wide neighbor can cause float issues with subsequent columns.
With this grid you can wrap the first two columns in a 24 column grid, which will act in the same manner as a row.
Pre and Post
Pre and Post classes are used to move your columns laterally across the grid by defining how many columns they should be from their neighbors on either side.
Pre and Post classes do not responsively fold. This prevents a pre-5 from pushing content off the edge of the screen on phone sizes.