最小列幅ではなく、**固定**数の列が必要な場合は、グリッドをfixed-gridコンテナでラップします。
デフォルトでは、この固定グリッドは**2列**です。
スポンサー
固定グリッド
カスタマイズ可能な2D **固定**グリッド
セル1
セル2
セル3
セル4
セル5
セル6
セル7
セル8
セル9
セル10
セル11
セル12
HTML
<div class="fixed-grid">
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
<div class="cell">Cell 7</div>
<div class="cell">Cell 8</div>
<div class="cell">Cell 9</div>
<div class="cell">Cell 10</div>
<div class="cell">Cell 11</div>
<div class="cell">Cell 12</div>
</div>
</div>固定グリッド修飾子の適用 #
1から12までの値を持つhas-$n-cols修飾子クラスを追加することで、**列数**を変更できます。
| クラス | 列数 |
|---|---|
has-0-cols |
0 |
has-1-cols |
1 |
has-2-cols |
2 |
has-3-cols |
3 |
has-4-cols |
4 |
has-5-cols |
5 |
has-6-cols |
6 |
has-7-cols |
7 |
has-8-cols |
8 |
has-9-cols |
9 |
has-10-cols |
10 |
has-11-cols |
11 |
has-12-cols |
12 |
コンテナブレークポイント #
**ブレークポイントごと**に異なる列数を指定できます。
| 列数 | モバイル | タブレット | デスクトップ | ワイドスクリーン | フルHD |
|---|---|---|---|---|---|
768pxまで |
769pxから |
1024pxから |
1216pxから |
1408pxから |
|
| 1 | has-1-cols-mobile |
has-1-cols-tablet |
has-1-cols-desktop |
has-1-cols-widescreen |
has-1-cols-fullhd |
| 2 | has-2-cols-mobile |
has-2-cols-tablet |
has-2-cols-desktop |
has-2-cols-widescreen |
has-2-cols-fullhd |
| 3 | has-3-cols-mobile |
has-3-cols-tablet |
has-3-cols-desktop |
has-3-cols-widescreen |
has-3-cols-fullhd |
| 4 | has-4-cols-mobile |
has-4-cols-tablet |
has-4-cols-desktop |
has-4-cols-widescreen |
has-4-cols-fullhd |
| 5 | has-5-cols-mobile |
has-5-cols-tablet |
has-5-cols-desktop |
has-5-cols-widescreen |
has-5-cols-fullhd |
| 6 | has-6-cols-mobile |
has-6-cols-tablet |
has-6-cols-desktop |
has-6-cols-widescreen |
has-6-cols-fullhd |
| 7 | has-7-cols-mobile |
has-7-cols-tablet |
has-7-cols-desktop |
has-7-cols-widescreen |
has-7-cols-fullhd |
| 8 | has-8-cols-mobile |
has-8-cols-tablet |
has-8-cols-desktop |
has-8-cols-widescreen |
has-8-cols-fullhd |
| 9 | has-9-cols-mobile |
has-9-cols-tablet |
has-9-cols-desktop |
has-9-cols-widescreen |
has-9-cols-fullhd |
| 10 | has-10-cols-mobile |
has-10-cols-tablet |
has-10-cols-desktop |
has-10-cols-widescreen |
has-10-cols-fullhd |
| 11 | has-11-cols-mobile |
has-11-cols-tablet |
has-11-cols-desktop |
has-11-cols-widescreen |
has-11-cols-fullhd |
| 12 | has-12-cols-mobile |
has-12-cols-tablet |
has-12-cols-desktop |
has-12-cols-widescreen |
has-12-cols-fullhd |
自動カウント固定グリッド #
has-auto-count修飾子を追加すると、固定グリッドは各**ブレークポイント**に対して列数を**自動的に**変更します。
- モバイルで2列
- タブレットで4列
- デスクトップで8列
- ワイドスクリーンで12列
- フルHDで16列
セル1
セル2
セル3
セル4
セル5
セル6
セル7
セル8
セル9
セル10
セル11
セル12
セル13
セル14
セル15
セル16
HTML
<div class="fixed-grid has-auto-count">
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
<div class="cell">Cell 7</div>
<div class="cell">Cell 8</div>
<div class="cell">Cell 9</div>
<div class="cell">Cell 10</div>
<div class="cell">Cell 11</div>
<div class="cell">Cell 12</div>
<div class="cell">Cell 13</div>
<div class="cell">Cell 14</div>
<div class="cell">Cell 15</div>
<div class="cell">Cell 16</div>
</div>
</div>