Important concepts

<ul class="Vlt-list Vlt-list--simple">
<li>This grid is designed to be <b>large-devices-first</b> (as opposed to mobile-first), in the sense that <code>.Vlt-col</code>, withouth modifiers, will work on large devices and <b>automatically stack on medium and small</b> ones.</li>

<li>This is done because it's our most common use case, which means less writing for you, but we also have a wealth of <b>responsive grid classes</b>, see the sidenav</li>

<li>Like bootstrap's grid, you don't have to specify a column size if you just want them to be even, as the <code>.Vlt-col</code> class takes care of the basics, <b>although</b> certain browsers may think some content requires more space and expand it's column if a width is not defined.</li>
</ul>

A basic grid of two columns that will stack on medium and small devices. By default they'll occupy the space evenly, **but** if the content of one of the columns requires more space, it will expand.

Columns can be broken into multiple lines using a separator with the class `.Vlt-grid__separator`.

A column's width can be defined adding a modifier based on how many columns you're working with, up to 4, in this way:

<ul class="Vlt-list Vlt-list--simple">
<li><b>Two columns:</b> <code>.Vlt-col--1of2</code> for 50%</li>
<li><b>Three columns:</b> <code>.Vlt-col--1of3</code> for 33.3%, <code>.Vlt-col--2of3</code> for 33.3%</li>
<li><b>Four columns:</b> <code>.Vlt-col--1of4</code> for 25%, <code>.Vlt-col--2of4</code> for 50%, .Vlt-col--3of4 for 75%</li>
</ul>