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

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>

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

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

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

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

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Smart Grid

A smart 2D grid with flexible columns

Smart Grid modifiers #

How to support Bulma