Bulma v1 附带一个新的智能网格。此网格是一个 2 维布局组件，具有灵活的列：Bulma 将适应尽可能多的列，给定最小列宽和列和行间隙。
默认情况下，智能网格具有
- 最小列宽为
9rem - 间隙为
0.75rem
赞助商
智能网格
一个具有灵活列的智能 2D 网格
单元格 1
单元格 2
单元格 3
单元格 4
单元格 5
单元格 6
单元格 7
单元格 8
单元格 9
单元格 10
单元格 11
单元格 12
单元格 13
单元格 14
单元格 15
单元格 16
单元格 17
单元格 18
单元格 19
单元格 20
单元格 21
单元格 22
单元格 23
单元格 24
HTML
<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 class="cell">Cell 17</div>
<div class="cell">Cell 18</div>
<div class="cell">Cell 19</div>
<div class="cell">Cell 20</div>
<div class="cell">Cell 21</div>
<div class="cell">Cell 22</div>
<div class="cell">Cell 23</div>
<div class="cell">Cell 24</div>
</div>智能网格修饰符 #
通过添加 is-col-min 修饰符类，其值范围为 0 至 12，可以按 1.5rem 的增量更改最小列宽
| 类 | 值 |
|---|---|
is-col-min-1 |
1.5rem |
is-col-min-2 |
3.0rem |
is-col-min-3 |
4.5rem |
is-col-min-4 |
6.0rem |
is-col-min-5 |
7.5rem |
is-col-min-6 |
9.0rem |
is-col-min-7 |
10.5rem |
is-col-min-8 |
12.0rem |
is-col-min-9 |
13.5rem |
is-col-min-10 |
15.0rem |
is-col-min-11 |
16.5rem |
is-col-min-12 |
18.0rem |
还可以按 0.5rem 的增量更改 gap、column-gap 和/或 row-gap
| 间距类 | 列间距 | 行间距 | 值 |
|---|---|---|---|
gap-0 |
column-gap-0 |
row-gap-0 |
0.0rem |
gap-1 |
column-gap-1 |
row-gap-1 |
0.5rem |
gap-2 |
column-gap-2 |
row-gap-2 |
1.0rem |
gap-3 |
column-gap-3 |
row-gap-3 |
1.5rem |
gap-4 |
column-gap-4 |
row-gap-4 |
2.0rem |
gap-5 |
column-gap-5 |
row-gap-5 |
2.5rem |
gap-6 |
column-gap-6 |
row-gap-6 |
3.0rem |
gap-7 |
column-gap-7 |
row-gap-7 |
3.5rem |
gap-8 |
column-gap-8 |
row-gap-8 |
4.0rem |