# グリッドシステム

## デフォルト

.%{STYLEGUIDE_PAGE}-containerで囲うと幅940px中央揃えに変わります。ブロックをレイアウトするために使います。合計12カラムで計算します。

※Ver.1.0.1では`%{STYLEGUIDE_PAGE}-grid`と`%{STYLEGUIDE_PAGE}-grid-r`でレスポンシブ対応にするか分けていましたが、Ver.1.1.0からは`%{STYLEGUIDE_PAGE}-col-`のクラス名の指定の仕方で管理できるように変更しました。従来の`%{STYLEGUIDE_PAGE}-grid`（レスポンシブ対応しないようにするクラス）を使う場合は、`%{STYLEGUIDE_PAGE}-col-`クラスをお使いください。

### .%{STYLEGUIDE_PAGE}-col-（レスポンシブ無し）

col-1
%{STYLEGUIDE_PAGE}-col-11
%{STYLEGUIDE_PAGE}-col-2
%{STYLEGUIDE_PAGE}-col-10
%{STYLEGUIDE_PAGE}-col-3
%{STYLEGUIDE_PAGE}-col-9
%{STYLEGUIDE_PAGE}-col-4
%{STYLEGUIDE_PAGE}-col-8
%{STYLEGUIDE_PAGE}-col-5
%{STYLEGUIDE_PAGE}-col-7
%{STYLEGUIDE_PAGE}-col-6
%{STYLEGUIDE_PAGE}-col-6

    <div class="%{STYLEGUIDE_PAGE}-container">
    	<div class="%{STYLEGUIDE_PAGE}-grid">
    		<div class="%{STYLEGUIDE_PAGE}-col-5">
    		...
    		</div>

    		<div class="%{STYLEGUIDE_PAGE}-col-7">
    		...
    		</div>
    	</div>
    </div>

### .%{STYLEGUIDE_PAGE}-col-*-（レスポンシブ有り）

col-md-1
%{STYLEGUIDE_PAGE}-col-md-11
%{STYLEGUIDE_PAGE}-col-md-2
%{STYLEGUIDE_PAGE}-col-md-10
%{STYLEGUIDE_PAGE}-col-md-3
%{STYLEGUIDE_PAGE}-col-md-9
%{STYLEGUIDE_PAGE}-col-md-4
%{STYLEGUIDE_PAGE}-col-md-8
%{STYLEGUIDE_PAGE}-col-md-5
%{STYLEGUIDE_PAGE}-col-md-7
%{STYLEGUIDE_PAGE}-col-md-6
%{STYLEGUIDE_PAGE}-col-md-6

    <div class="%{STYLEGUIDE_PAGE}-container">
    	<div class="%{STYLEGUIDE_PAGE}-grid">
    		<div class="%{STYLEGUIDE_PAGE}-col-md-5">
    		...
    		</div>

    		<div class="%{STYLEGUIDE_PAGE}-col-md-7">
    		...
    		</div>
    	</div>
    </div>

### スマートフォン、タブレット、デスクトップ幅

.%{STYLEGUIDE_PAGE}-col-md-7 .%{STYLEGUIDE_PAGE}-col-sm-6
.%{STYLEGUIDE_PAGE}-col-md-5 .%{STYLEGUIDE_PAGE}-col-sm-6
.%{STYLEGUIDE_PAGE}-col-md-7 .%{STYLEGUIDE_PAGE}-col-sm-6 .%{STYLEGUIDE_PAGE}-col-lg-4
.%{STYLEGUIDE_PAGE}-col-md-5 .%{STYLEGUIDE_PAGE}-col-sm-6 . %{STYLEGUIDE_PAGE}-col-lg-8
.%{STYLEGUIDE_PAGE}-col-md-7 .%{STYLEGUIDE_PAGE}-col-sm-6 .%{STYLEGUIDE_PAGE}-col-lg-4 .%{STYLEGUIDE_PAGE}-col-xl-8
.%{STYLEGUIDE_PAGE}-col-md-5 .%{STYLEGUIDE_PAGE}-col-sm-6 . %{STYLEGUIDE_PAGE}-col-lg-8 .%{STYLEGUIDE_PAGE}-col-xl-4

    <div class="%{STYLEGUIDE_PAGE}-container">
    	<div class="%{STYLEGUIDE_PAGE}-grid">
    		<div class="%{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-col-sm-6">
    		...
    		</div>

    		<div class="%{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-col-sm-6">
    		...
    		</div>

    	</div>

    	<div class="%{STYLEGUIDE_PAGE}-grid">
    		<div class="%{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-col-sm-6 %{STYLEGUIDE_PAGE}-col-lg-4">
    		...
    		</div>

    		<div class="%{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-col-sm-6 %{STYLEGUIDE_PAGE}-col-lg-8">
    		...
    		</div>

    	</div>

    	<div class="%{STYLEGUIDE_PAGE}-grid">
    		<div class="%{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-col-sm-6 %{STYLEGUIDE_PAGE}-col-lg-4 %{STYLEGUIDE_PAGE}-col-xl-8">
    		...
    		</div>

    		<div class="%{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-col-sm-6 %{STYLEGUIDE_PAGE}-col-lg-8 %{STYLEGUIDE_PAGE}-col-xl-4">
    		...
    		</div>

    	</div>
    </div>

### 各画面幅対応表

クラス名 | デフォルトのブレイクポイント
--- | ---
%{STYLEGUIDE_PAGE}-col- | 全て
%{STYLEGUIDE_PAGE}-col-sm- | 480px以上〜
%{STYLEGUIDE_PAGE}-col-md- | 768px以上〜
%{STYLEGUIDE_PAGE}-col-lg- | 1024px以上〜
%{STYLEGUIDE_PAGE}-col-xl- | 1440px以上〜

## グリッドの入れ子

%{STYLEGUIDE_PAGE}-col-md-4
%{STYLEGUIDE_PAGE}-col-md-8
.%{STYLEGUIDE_PAGE}-col-md-5
.%{STYLEGUIDE_PAGE}-col-md-7

    <div class="%{STYLEGUIDE_PAGE}-grid">
    	<div class="%{STYLEGUIDE_PAGE}-col-md-4">
    	...
    	</div>

    	<div class="%{STYLEGUIDE_PAGE}-col-md-8">
    		<div class="%{STYLEGUIDE_PAGE}-grid">
    			<div class="%{STYLEGUIDE_PAGE}-col-md-5">
    			...
    			</div>

    			<div class="%{STYLEGUIDE_PAGE}-col-md-7">
    			...
    			</div>
    		</div>
    	</div>
    </div>

### グリッドの入れ替え push(左→右) 、pull(右→左)

.%{STYLEGUIDE_PAGE}-push-5にするとグリッドが右側にきて、.%{STYLEGUIDE_PAGE}-pull-7にするとグリッドが左側にきます。

.%{STYLEGUIDE_PAGE}-push-md-5(左から右へ入れ替え)
.%{STYLEGUIDE_PAGE}-pull-md-7(右から左へ入れ替え)

    <div class="%{STYLEGUIDE_PAGE}-grid">
    	<div class="%{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-push-md-5">
    	...
    	</div>

    	<div class="%{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-pull-md-7">
    	...
    	</div>
    </div>

### グリッドの入れ替え push(左→右) 、pull(右→左) タブレット幅

タブレット幅のときに.%{STYLEGUIDE_PAGE}-push-md-5にするとグリッドが右側にきて、.%{STYLEGUIDE_PAGE}-pull-md-7にするとグリッドが左側にきます。

.%{STYLEGUIDE_PAGE}-push-md-5(左から右へ入れ替え)
.%{STYLEGUIDE_PAGE}-pull-md-7(右から左へ入れ替え)

    <div class="%{STYLEGUIDE_PAGE}-grid">
    	<div class="%{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-push-md-5">
    	...
    	</div>

    	<div class="%{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-pull-md-7">
    	...
    	</div>
    </div>

### グリッドの入れ替え push(左→右) 、pull(右→左) スマートフォン幅

スマートフォンの幅のときに.%{STYLEGUIDE_PAGE}-push-sm-5にするとグリッドが右側にきて、.%{STYLEGUIDE_PAGE}-pull-sm-7にするとグリッドが左側にきます。

.%{STYLEGUIDE_PAGE}-push-sm-5(左から右へ入れ替え)
.%{STYLEGUIDE_PAGE}-pull-sm-7(右から左へ入れ替え)

    <div class="%{STYLEGUIDE_PAGE}-grid">
    	<div class="%{STYLEGUIDE_PAGE}-col-sm-7 %{STYLEGUIDE_PAGE}-push-sm-5">
    	...
    	</div>

    	<div class="%{STYLEGUIDE_PAGE}-col-sm-5 %{STYLEGUIDE_PAGE}-pull-sm-7">
    	...
    	</div>
    </div>

### グリッドの入れ替え push、pullを解除する スマートフォン幅、タブレット幅

タブレット幅のときにpush、pullを解除する

.%{STYLEGUIDE_PAGE}-push-md-auto(左から右→右から左へ入れ替え)
.%{STYLEGUIDE_PAGE}-pull-md-auto(右から左→左から右へ入れ替え)

    <div class="%{STYLEGUIDE_PAGE}-grid">
    	<div class="%{STYLEGUIDE_PAGE}-push-5 %{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-push-md-auto">
    	...
    	</div>

    	<div class="%{STYLEGUIDE_PAGE}-pull-7 %{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-pull-md-auto">
    	...
    	</div>
    </div>

スマートフォン幅のときにpush、pullを解除する

.%{STYLEGUIDE_PAGE}-push-sm-auto(左から右→右から左へ入れ替え)
.%{STYLEGUIDE_PAGE}-pull-sm-auto(右から左→左から右へ入れ替え)

    <div class="%{STYLEGUIDE_PAGE}-grid">
    	<div class="%{STYLEGUIDE_PAGE}-push-5 %{STYLEGUIDE_PAGE}-col-md-7 %{STYLEGUIDE_PAGE}-push-md-5 %{STYLEGUIDE_PAGE}-col-sm-7 %{STYLEGUIDE_PAGE}-push-sm-auto">
    	...
    	</div>

    	<div class="%{STYLEGUIDE_PAGE}-pull-7 %{STYLEGUIDE_PAGE}-col-md-5 %{STYLEGUIDE_PAGE}-pull-md-7 %{STYLEGUIDE_PAGE}-col-sm-5 %{STYLEGUIDE_PAGE}-pull-sm-auto">
    	...
    	</div>
    </div>