03. Rows

There are currently 3 row classes that you can use;

Class	Type
.row	block
.row--contained	modifier
.row--flex	modifier

.row

All row elements must include this class, as it contains the base styles that allow the child columns to work correctly.

<div class="row">
</div>

.row--contained

This modifier can be added to any row elements to prevent them from stretching the full width of the page. The max width is dictated by the $site-width setting.

<div class="row row--contained">
	<!-- This now has a max-width -->
</div>

.row--flex

To make your column heights match, you can add the row--flex class to your .row element.

<div class="row row--flex">
	<div class="col--1of3">This column will be taller than the rest due to extra content within it</div>
	<div class="col--1of3">Lorem ipsum dolor sit amet</div>
	<div class="col--1of3">Lorem ipsum dolor sit amet</div>
</div>