グリッドシステム

デフォルト

合計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-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>