# グリッドシステム

## デフォルト

合計12カラムで計算します。

.acms-containerで囲うと幅940px中央揃えに変わります。

ブロックをレイアウトするために使います。

### .acms-grid（レスポンシブ無し）

col-1
acms-col-11
acms-col-2
acms-col-10
acms-col-3
acms-col-9
acms-col-4
acms-col-8
acms-col-5
acms-col-7
acms-col-6
acms-col-6

    <div class="acms-container">
    	<div class="acms-grid">
    		<div class="acms-col-5">
    		...
    		</div>

    		<div class="acms-col-7">
    		...
    		</div>
    	</div>
    </div>

### .acms-grid-r（レスポンシブ有り）

col-1
acms-col-11
acms-col-2
acms-col-10
acms-col-3
acms-col-9
acms-col-4
acms-col-8
acms-col-5
acms-col-7
acms-col-6
acms-col-6

    <div class="acms-container">
    	<div class="acms-grid-r">
    		<div class="acms-col-5">
    		...
    		</div>

    		<div class="acms-col-7">
    		...
    		</div>
    	</div>
    </div>

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

.acms-col-10 .acms-col-md-3
.acms-col-2 .acms-col-md-9
.acms-col-2 .acms-col-md-5 .acms-col-sm-5
.acms-col-3 .acms-col-md-3 .acms-col-sm-4
.acms-col-7 .acms-col-md-4 .acms-col-sm-3

    <div class="acms-container">
    	<div class="acms-grid-r">
    		<div class="acms-col-2 acms-col-md-5 acms-col-sm-5">
    		...
    		</div>

    		<div class="acms-col-3 acms-col-md-3 acms-col-sm-4">
    		...
    		</div>

    		<div class="acms-col-7 acms-col-md-4 acms-col-sm-3">
    		...
    		</div>
    	</div>
    </div>

## グリッドの入れ子

acms-col-4
acms-col-8
.acms-col-5
.acms-col-7

    <div class="acms-grid">
    	<div class="acms-col-4">
    	...
    	</div>

    	<div class="acms-col-8">
    		<div class="acms-grid">
    			<div class="acms-col-5">
    			...
    			</div>

    			<div class="acms-col-7">
    			...
    			</div>
    		</div>
    	</div>
    </div>

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

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

.acms-push-5(左から右へ入れ替え)
.acms-pull-7(右から左へ入れ替え)

    <div class="acms-grid">
    	<div class="acms-col-7 acms-push-5">
    	...
    	</div>

    	<div class="acms-col-5 acms-pull-7">
    	...
    	</div>
    </div>

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

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

.acms-push-md-5(左から右へ入れ替え)
.acms-pull-md-7(右から左へ入れ替え)

    <div class="acms-grid-r">
    	<div class="acms-col-7 acms-col-md-7 acms-push-md-5">
    	...
    	</div>

    	<div class="acms-col-5 acms-col-md-5 acms-pull-md-7">
    	...
    	</div>
    </div>

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

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

.acms-push-sm-5(左から右へ入れ替え)
.acms-pull-sm-7(右から左へ入れ替え)

    <div class="acms-grid-r">
    	<div class="acms-col-7 acms-col-sm-7 acms-push-sm-5">
    	...
    	</div>

    	<div class="acms-col-5 acms-col-sm-5 acms-pull-sm-7">
    	...
    	</div>
    </div>

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

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

.acms-push-md-auto(左から右→右から左へ入れ替え)
.acms-pull-md-auto(右から左→左から右へ入れ替え)

    <div class="acms-grid-r">
    	<div class="acms-col-7 acms-push-5 acms-col-md-7 acms-push-md-auto">
    	...
    	</div>

    	<div class="acms-col-5 acms-pull-7 acms-col-md-5 acms-pull-md-auto">
    	...
    	</div>
    </div>

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

.acms-push-sm-auto(左から右→右から左へ入れ替え)
.acms-pull-sm-auto(右から左→左から右へ入れ替え)

    <div class="acms-grid-r">
    	<div class="acms-col-7 acms-push-5 acms-col-md-7 acms-push-md-5 acms-col-sm-7 acms-push-sm-auto">
    	...
    	</div>

    	<div class="acms-col-5 acms-pull-7 acms-col-md-5 acms-pull-md-7 acms-col-sm-5 acms-pull-sm-auto">
    	...
    	</div>
    </div>