Grid: Align Mid

Grid

Reversible

.grid--reverse

A reversed grid allows you change the source order of the markup and still keep a left-to-right layout.

Align Mid

.grid--align-mid

Uses vertical-align to middle align the columns vertically.

Flexbox

.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.

Gutterless

.grid--gutterless

Removes all gutters from columns.

Tight

.grid--tight

Uses 1/2 sized gutters.

Spaced

.grid--spaced

Adds gutter-sized margins beneath each column. Can be combined with other modifiers that affect margins.

Pixel Gutters

.grid--pixelgutter

Sets the gutters to 1px

<div class="grid grid--align-mid"> <div class="grid__col col-3@m"> <div class="grid__helper">Lorem ipsum</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>