#Reference table

This is the list of classes and modifiers available in our grid. It is limited by design because we strive to keep consistency above enabling the production of any variety of layouts

<div class="Vlt-table Vlt-table--data">
|Class | Behaviour|
|---|---|
|`.Vlt-grid` | Mandatory wrapper of the grid, gives it `display: flex`|
|`.Vlt-grid--stack-flush` | Removes the vertical margins that cells get by default when they stack on <b>small and medium</b> screens|
|`.Vlt-grid--middle` | Changes `align-items` from 'stretch' to 'center'|
|`.Vlt-grid--bottom` | Changes `align-items` from 'stretch' to 'flex-end'|
|`.Vlt-grid--narrow` | Changes the horizontal margins and paddings to half of the standard ones. Needed for grid forms.|
|`.Vlt-grid__separator` | A special div with this class forces the next columns to break to a new line.|
</div>

This is the list of classes and modifiers available for columns:

<div class="Vlt-table Vlt-table--data">
|Class |  Behaviour|
|---|---|
|`.Vlt-col` | Basic column class producing columns of equal width, has `flex-basis: 0` and `flex-grow: 1`. While theoretically you could have as many columns as you want, by design we are supporting only 2, 3 and 4 columns for the moment.|
|`.Vlt-col--1of2` | Forces a column's width to be 50% in <b>large</b> screens|
|`.Vlt-col--1of3` | Forces a column's width to be 33.33% in <b>large</b> screens|
|`.Vlt-col--2of3` | Forces a column's width to be 66.66% in <b>large</b> screens|
|`.Vlt-col--1of4` | Forces a column's width to be 25% in <b>large</b> screens|
|`.Vlt-col--2of4` | Forces a column's width to be 50% in <b>large</b> screens. Technically it's a repetition of `.Vlt-col--1of2`, and you can use either, but in a situation with 4 columns this might be syntactically more appropriate|
|`.Vlt-col--3of4` | Forces a column's width to be 75% in <b>large</b> screens|
|`.Vlt-col--S-1of2` | Forces a column's width to be 50% in <b>small</b> screens (under 576px width)|
|`.Vlt-col--S-1of3` | Forces a column's width to be 33.33% in <b>small</b> screens (under 576px width)/td>|
|`.Vlt-col--S-2of3` | Forces a column's width to be 66.66% in <b>small</b> screens (under 576px width)|
|`.Vlt-col--S-1of4` | Forces a column's width to be 25% in <b>small</b> screens (under 576px width)|
|`.Vlt-col--S-2of4` | Forces a column's width to be 50% in <b>small</b> screens (under 576px width). Technically it's a repetition of `.Vlt-col--S-1of2`, and you can use either, but in a situation with 4 columns this might be syntactically more appropriate|
|`.Vlt-col--S-3of4` | Forces a column's width to be 75% in <b>small</b> screens (under 576px width)|
|`.Vlt-col--M-1of2` | Forces a column's width to be 50% in <b>medium</b> screens ONLY (between 576px and 768px width)|
|`.Vlt-col--M-1of3` | Forces a column's width to be 33.33% in <b>medium</b> screens ONLY (between 576px and 768px width)|
|`.Vlt-col--M-2of3` | Forces a column's width to be 66.66% in <b>medium</b> screens ONLY (between 576px and 768px width)|
|`.Vlt-col--M-1of4` | Forces a column's width to be 25% in <b>medium</b> screens ONLY (between 576px and 768px width)|
|`.Vlt-col--M-2of4` | Forces a column's width to be 50% in <b>medium</b> screens ONLY (between 576px and 768px width). Technically it's a repetition of `.Vlt-col--M-1of2`, and you can use either, but in a situation with 4 columns this might be syntactically more appropriate|
|`.Vlt-col--M-3of4` | Forces a column's width to be 75% in <b>large</b> screens|

</div>