.grid--reverse
A reversed grid allows you change the source order of the markup and still keep a left-to-right layout.
.grid--align-mid
Uses vertical-align to middle align the columns vertically.
.grid--flex
The grid can make use of CSS3 capabilities of modern browsers to solve layout problems that were previously unsolvable with CSS alone. A good example of this the ability to have equal-height columns via Flexbox.
.grid--gutterless
Removes all gutters from columns.
.grid--tight
Uses 1/2 sized gutters.
.grid--spaced
Adds gutter-sized margins beneath each column. Can be combined with other modifiers that affect margins.
.grid--pixelgutter
Sets the gutters to 1px
<div class="grid grid--flex">
<div class="grid__col col-3@m">
<div class="grid__helper">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</div>
</div>
<div class="grid__col col-9@m">
<div class="grid__helper">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
/* No context defined for this component. */