Smart Grid

A smart 2D grid with flexible columns

Bulma v1 comes with a new Smart Grid. This grid is a 2 dimensional layout component that features flexible columns: Bulma will fit as many columns as possible, given a minimum column width and a column and row gap.

By default, the Smart Grid has:

  • a minimum column width of 9rem
  • a gap of 0.75rem
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 11
Cell 12
Cell 13
Cell 14
Cell 15
Cell 16
Cell 17
Cell 18
Cell 19
Cell 20
Cell 21
Cell 22
Cell 23
Cell 24


<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>

Smart Grid modifiers #

You can change the minimum column width by increments of 1.5rem, by adding the is-col-min modifier class with a value ranging from 0 to 12:

Class Value
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

You can also change the gap, column-gap and/or row-gap by increments of 0.5rem:

Gap Class Column Gap Row Gap Value
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

How to support Bulma

#native_company# #native_desc#