グリッドシステム例

PCでウインドウサイズを変更しながら確認してみてください。


2カラム

タブレットサイズ(641px)以上で2カラム、タブレットサイズ(640px)以下で全て1カラムに切り替わります

medium-8
medium-4

スマホサイズ(640px)以下で設定(small-[数字])の場合はカラムは変わりません。

small-8
small-4

数字の合計が12以上の場合(カラム落ちする例)

medium-8
medium-4
medium-5

3カラム

タブレットサイズ(641px)以上で3カラム、タブレットサイズ(640px)以下で全て1カラムに切り替わります

.medium-3
.medium-6
.medium-3

12カラム

タブレットサイズ(640px)以下で全て1カラムに切り替わります

.medium-1
.medium-1
.medium-1
.medium-1
.medium-1
.medium-1
.medium-1
.medium-1
.medium-1
.medium-1
.medium-1
.medium-1