如果你不想要一个最小列宽，而想要一个固定数量的列，请将网格包装在 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>应用固定网格修饰符 #
您可以通过添加 has-$n-cols 修饰符类（其值范围为 1 至 12）来更改列数
| 类 | 列数 |
|---|---|
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 |
容器断点 #
您可以为每个断点指定不同的列数
| 列数 | 移动设备 | 平板电脑 | 台式机 | 宽屏 | 全高清 |
|---|---|---|---|---|---|
直到 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
- 全高清上为 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>