基本的な使い方

引数にグリッドの分割数を指定して呼び出してください。

/* 例）12分割のグリッドの場合 */
@include grid_system(12);

これでCSSファイルにクラスが書き出されるので、グリッドの親要素に「grid__N」、子要素に「grid_N」のようにクラスを指定します。
親要素の「N」には分割数を、子要素の「N」には、合計が分割数となるように数字を割り振ってください。
グリッドの間隔は「gutter--N」で指定します。数字だけだとパーセントになりますが、「gutter--Npx」とすることでピクセルでの指定も可能です。

間隔をpxで指定

<div class="grid--12 gutter--20px">
	<div class="grid__col--6"></div>
	<div class="grid__col--3"></div>
	<div class="grid__col--3"></div>
</div>

間隔をパーセントで指定

<div class="grid--12 gutter--2">
	<div class="grid__col--4"></div>
	<div class="grid__col--4"></div>
	<div class="grid__col--4"></div>
</div>

入れ子

ブレークポイントで分割数を変更

PC、タブレット、スマホで分割数を変更

<div class="grid--12 gutter--2">
	<div class="grid__col--3 tablet_grid__col--6 sp_grid__col--12">grid__col--3</div>
	<div class="grid__col--3 tablet_grid__col--6 sp_grid__col--12">grid__col--3</div>
	<div class="grid__col--3 tablet_grid__col--6 sp_grid__col--12">grid__col--3</div>
	<div class="grid__col--3 tablet_grid__col--6 sp_grid__col--12">grid__col--3</div>
</div>

ブレークポイントで間隔を変更

PC、タブレット、スマホで間隔を変更

<div class="grid--12 gutter--20px tablet_gutter--15px sp_gutter--10px">
	<div class="grid__col--3">grid__col--3</div>
	<div class="grid__col--3">grid__col--3</div>
	<div class="grid__col--3">grid__col--3</div>
	<div class="grid__col--3">grid__col--3</div>
</div>

画像の配置例

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.