Grid カラムレイアウト

Grid - サンプル① 1カラム * 12

span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
<div class="grid">
	<div class="col align-center span-1">span-4</div>
	<div class="col align-center span-1">span-4</div>
	<div class="col align-center span-1">span-4</div>
	<div class="col align-center span-1">span-4</div>
	<div class="col align-center span-1">span-4</div>
	<div class="col align-center span-1">span-4</div>
	<div class="col align-center span-1">span-4</div>
	<div class="col align-center span-1">span-4</div>
	<div class="col align-center span-1">span-4</div>
	<div class="col align-center span-1">span-4</div>
	<div class="col align-center span-1">span-4</div>
	<div class="col align-center span-1">span-4</div>
</div>

Grid - サンプル② 4カラム * 3

span-4
span-4
span-4
<div class="grid">
	<div class="col align-center span-4">span-4</div>
	<div class="col align-center span-4">span-4</div>
	<div class="col align-center span-4">span-4</div>
</div>

Grid - サンプル③ 2カラム | 8カラム | 2カラム

span-2
span-8
span-2
<div class="grid">
	<div class="col align-center span-2">span-2</div>
	<div class="col align-center span-8">span-8</div>
	<div class="col align-center span-2">span-2</div>
</div>

Grid - サンプル④ 6カラム - 3プッシュ

span-6.push-3
<div class="grid">
	<div class="col align-center span-6 push-3">span-6.push-3</div>
</div>

Grid - サンプル⑤ 8カラム - 4プッシュ | 4カラム - 8プル

span-8.push-4
span-4.pull-8