#Grid Object

The grid object arranges content using a grid system.

<div class="o-grid">
	<div class="o-grid__item u-w-1-3"></div>
	<div class="o-grid__item u-w-1-3"></div>
	<div class="o-grid__item u-w-1-3"></div>
</div>

Installation

Install using Bower:

$ bower --save bare-grid

Import into project:

@import "bower_components/bare-grid/objects.grid";

Options

grid--xs

The grid--xs option applies an extra-small gutter between grid items.

<div class="o-grid o-grid--xs">
	<div class="o-grid__item u-w-1-3"></div>
	<div class="o-grid__item u-w-1-3"></div>
	<div class="o-grid__item u-w-1-3"></div>
</div>

grid--s

The grid--s option applies a small gutter between grid items.

<div class="o-grid o-grid--s">
	<div class="o-grid__item u-w-1-3"></div>
	<div class="o-grid__item u-w-1-3"></div>
	<div class="o-grid__item u-w-1-3"></div>
</div>

grid--l

The grid--l option applies a large gutter between grid items.

<div class="o-grid o-grid--l">
	<div class="o-grid__item u-w-1-3"></div>
	<div class="o-grid__item u-w-1-3"></div>
	<div class="o-grid__item u-w-1-3"></div>
</div>

grid--xl

The grid--xl option applies an extra-large gutter between grid items.

<div class="o-grid o-grid--xl">
	<div class="o-grid__item u-w-1-3"></div>
	<div class="o-grid__item u-w-1-3"></div>
	<div class="o-grid__item u-w-1-3"></div>
</div>

grid--flush

The grid--flush option applies no gutter between grid items.

<div class="o-grid o-grid--flush">
	<div class="o-grid__item u-w-1-3"></div>
	<div class="o-grid__item u-w-1-3"></div>
	<div class="o-grid__item u-w-1-3"></div>
</div>