Layouts

Manipulating Columns

At this point the system isn't actually using a 12 column grid, it's more freeform. If left like this, columns would always equalise. Two columns would share the row 50/50, four would be 25% each and so on. To break out of this we can start adding .span# classes to the <div class="col">'s. This column for instance is <div class="col .span9">. (It's also centred, again breaking the 12 column grid, but more on that later.)

Defining the column widths using the above example:

<section id="sectionOne">
	<div class="container">
		<div class="row">
			<div class="col span6">.col</div>
			<div class="col span2">.col</div>
			<div class="col span2">.col</div>
			<div class="col span2">.col</div>
		</div>
	</div>
</section>
<section id="sectionTwo">
	<div class="container">
		<div class="row">
			<div class="col span8">.col</div>
			<div class="col span4">.col</div>
		</div>
	</div>
</section>

Offsetting Columns

Lets say you want to align a column with the row above but you don't need the row aboves left most column. In this case you need to offset the column by the width of the column you're removing, thats a really confusing way to describe what will make a lot more sense if you just look at the example below.

<div class="row"> 
	<div class="col demo span2"><code>.col.span2</code></div> 
	<div class="col demo span6"><code>.col.span6</code></div> 
	<div class="col demo span4"><code>.col.span4</code></div> 
</div> 
<div class="row"> 
	<div class="col demo span6 offset2"><code>.col.span6.offset2</code></div> 
</div>

Centering Columns

It's very common to need to center columns, in both directions. For horizontal centering, if you're using the 12 column grid and columns who's total width add up to an even number. You can offset the first column by half the remaining width to center them all.

Example:

<div class="row">
	<div class="col span2 demo"><code>.col.span2</code></div>
	<div class="col span2 demo"><code>.col.span2</code></div>
	<div class="col span2 demo"><code>.col.span2</code></div>
</div>

Or do it the easy way

However, if you're using an number of columns who's width add up to an odd number, or if you just want an easier way to do it, then just stick .hCenter on the parent .row.

Example:

<div class="row hCenter">
	<div class="col span2 demo"><code>.col.span2</code></div>
	<div class="col span2 demo"><code>.col.span2</code></div>
	<div class="col span2 demo"><code>.col.span2</code></div>
</div>

You can even break out of the grid

You might not need to do this very often, but its another quick and easy tool at your disposal. This explainer is breaking the grid. The example below shows 12 single width columns and a centred column breaking the grid. I'm sure you dont need to see the HTML at this point.

Example:

And lastly, vertical centering

And probably most commonly needed in a grid system. Vertical centering, I bet you've guessed it, stick .vCenter on the parent .row.

Example:

<div class="row vCenter">
	<div class="col span4 demo"><code>.col.span4</code>Lorem Ipsum...</div>
	<div class="col span8 demo"><code>.col.span8</code></div>
</div>

To align the colmns to their bottom, add .vBottom on the parent .row.

Example:

<div class="row vBottom">
	<div class="col span4 demo"><code>.col.span4</code>Lorem Ipsum...</div>
	<div class="col span8 demo"><code>.col.span8</code></div>
</div>

Nesting Rows and Columns

More .row's and .col's can be nested within one another to give extra flexibility.

Using the same example again:

<section id="sectionOne">
<div class="container">
	<div class="row">
		<div class="col span6">.col</div>
		<div class="col span2">.col</div>
		<div class="col span2">.col</div>
		<div class="col span2">.col</div>
	</div>
</div>
</section>
<section id="sectionTwo">
<div class="container">
	<div class="row">
		<div class="col span8"> 
			.col .span8 
			<div class="row pdTop1"> 
				<div class="col span8">.span8</div> 
				<div class="col span4">.span4</div> 
			</div> 
		</div> 
		<div class="col span4"> 
			.col .span4 
			<div class="row pdTop1"> 
				<div class="col span6">.span6</div> 
				<div class="col span6">.span6</div> 
			</div> 
		</div> 
	</div>
</div>
</section>