グリッドシステム

デフォルト

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

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

.acms-col-(レスポンシブ無し)

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-col-*-(レスポンシブ有り)

col-md-1
acms-col-md-11
acms-col-md-2
acms-col-md-10
acms-col-md-3
acms-col-md-9
acms-col-md-4
acms-col-md-8
acms-col-md-5
acms-col-md-7
acms-col-md-6
acms-col-md-6
<div class="acms-container">
	<div class="acms-grid-r">
		<div class="acms-col-md-5">
		...
		</div>

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

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

.acms-col-md-7 .acms-col-sm-6
.acms-col-md-5 .acms-col-sm-6
.acms-col-md-7 .acms-col-sm-6 .acms-col-lg-4
.acms-col-md-5 .acms-col-sm-6 . acms-col-lg-8
.acms-col-md-7 .acms-col-sm-6 .acms-col-lg-4 .acms-col-xl-8
.acms-col-md-5 .acms-col-sm-6 . acms-col-lg-8 .acms-col-xl-4
<div class="acms-container">
	<div class="acms-grid-r">
		<div class="acms-col-md-7 acms-col-sm-6">
		...
		</div>

		<div class="acms-col-md-5 acms-col-sm-6">
		...
		</div>

	</div>

	<div class="acms-grid-r">
		<div class="acms-col-md-7 acms-col-sm-6 acms-col-lg-4">
		...
		</div>

		<div class="acms-col-md-5 acms-col-sm-6 acms-col-lg-8">
		...
		</div>

	</div>

	<div class="acms-grid-r">
		<div class="acms-col-md-7 acms-col-sm-6 acms-col-lg-4 acms-col-xl-8">
		...
		</div>

		<div class="acms-col-md-5 acms-col-sm-6 acms-col-lg-8 acms-col-xl-4">
		...
		</div>

	</div>
</div>

各画面幅対応表

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

グリッドの入れ子

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

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

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

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

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

.acms-push-md-5(左から右へ入れ替え)
.acms-pull-md-7(右から左へ入れ替え)
<div class="acms-grid">
	<div class="acms-col-md-7 acms-push-md-5">
	...
	</div>

	<div class="acms-col-md-5 acms-pull-md-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-md-7 acms-push-md-5">
	...
	</div>

	<div class="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-sm-7 acms-push-sm-5">
	...
	</div>

	<div class="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-push-5 acms-col-md-7 acms-push-md-auto">
	...
	</div>

	<div class="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-push-5 acms-col-md-7 acms-push-md-5 acms-col-sm-7 acms-push-sm-auto">
	...
	</div>

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