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>スマートグリッド修飾子 #
1.5rem単位で最小列幅を変更できます。is-col-min修飾子クラスに0から12の範囲の値を指定することで変更できます。
| クラス | 値 |
|---|---|
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 |
gap、column-gap、またはrow-gapも0.5rem単位で変更できます。
| ギャップクラス | 列ギャップ | 行ギャップ | 値 |
|---|---|---|---|
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 |