智能网格

一个具有灵活列的智能 2D 网格

Bulma v1 带有新的智能网格。此网格是一个二维布局组件，具有灵活的列：在给定的最小列宽以及列和行间距的情况下，Bulma 将适应尽可能多的列。

默认情况下，智能网格具有

最小列宽为 9rem
间距为 0.75rem

单元格 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>

智能网格修饰符 #

您可以通过增加 1.5rem 的增量来更改最小列宽，方法是添加 is-col-min 修饰符类，其值范围从 0 到 32

类	值
`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`
`is-col-min-13`	`19.5rem`
`is-col-min-14`	`21.0rem`
`is-col-min-15`	`22.5rem`
`is-col-min-16`	`24.0rem`
`is-col-min-17`	`25.5rem`
`is-col-min-18`	`27.0rem`
`is-col-min-19`	`28.5rem`
`is-col-min-20`	`30.0rem`
`is-col-min-21`	`31.5rem`
`is-col-min-22`	`33.0rem`
`is-col-min-23`	`34.5rem`
`is-col-min-24`	`36.0rem`
`is-col-min-25`	`37.5rem`
`is-col-min-26`	`39.0rem`
`is-col-min-27`	`40.5rem`
`is-col-min-28`	`42.0rem`
`is-col-min-29`	`43.5rem`
`is-col-min-30`	`45.0rem`
`is-col-min-31`	`46.5rem`
`is-col-min-32`	`48.0rem`

您还可以通过 0.5rem 的增量来更改 gap，column-gap 和/或 row-gap

间距类	列间距	行间距	值
`is-gap-0`	`is-column-gap-0`	`is-row-gap-0`	`0.0rem`
`is-gap-1`	`is-column-gap-1`	`is-row-gap-1`	`0.5rem`
`is-gap-2`	`is-column-gap-2`	`is-row-gap-2`	`1.0rem`
`is-gap-3`	`is-column-gap-3`	`is-row-gap-3`	`1.5rem`
`is-gap-4`	`is-column-gap-4`	`is-row-gap-4`	`2.0rem`
`is-gap-5`	`is-column-gap-5`	`is-row-gap-5`	`2.5rem`
`is-gap-6`	`is-column-gap-6`	`is-row-gap-6`	`3.0rem`
`is-gap-7`	`is-column-gap-7`	`is-row-gap-7`	`3.5rem`
`is-gap-8`	`is-column-gap-8`	`is-row-gap-8`	`4.0rem`

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 助手

智能网格

一个具有灵活列的智能 2D 网格

智能网格修饰符 #

如何支持 Bulma