The grid
Bulma 1.0 added a second layout system built on CSS Grid. Columns (columns) suit a row of two or three blocks of different widths, while the grid is handy for many equal cells: a photo gallery, dish cards, stat tiles. Cells wrap to a new line by themselves, and there are no widths to calculate.
Cells that lay themselves out
A block with the grid class with cell children:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<div class="grid">
<div class="cell has-background-light p-3">Bruschetta</div>
<div class="cell has-background-light p-3">Minestrone</div>
<div class="cell has-background-light p-3">Carbonara</div>
<div class="cell has-background-light p-3">Lasagne</div>
<div class="cell has-background-light p-3">Tiramisu</div>
<div class="cell has-background-light p-3">Panna cotta</div>
</div>The cells line up and wrap when there is not enough room. Each cell is at least 9 rem wide: a narrow window fits two per row, a wide one six. The p-3 class only adds padding.
Minimum cell width
The is-col-min-N modifier changes the minimum width: each step is 1.5 rem, from is-col-min-1 (1.5 rem) to is-col-min-32 (48 rem). For dish cards with photos is-col-min-10, 15 rem, works well:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<div class="grid is-col-min-10">
<div class="cell"><img src="/media/photo-400x250.jpg" alt="Pasta"></div>
<div class="cell"><img src="/media/photo-400x250.jpg" alt="Pizza"></div>
<div class="cell"><img src="/media/photo-400x250.jpg" alt="Salad"></div>
</div>The photos never get narrower than 15 rem: if three do not fit, the third moves to a new line.
A fixed number of columns
When you need exactly three columns, wrap the grid in a fixed-grid block with the has-3-cols modifier:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<div class="fixed-grid has-3-cols">
<div class="grid">
<div class="cell has-background-primary-light p-3">Orders: 48</div>
<div class="cell has-background-info-light p-3">Guests: 120</div>
<div class="cell has-background-warning-light p-3">Revenue: €2400</div>
<div class="cell is-col-span-2 has-background-light p-3">Weekly chart</div>
<div class="cell has-background-light p-3">Reviews</div>
</div>
</div>Three admin stat tiles in the first row; in the second, a wide cell spanning two columns and one ordinary cell. The is-col-span-2 cell modifier stretches a cell over two columns, is-row-span-2 over two rows.
| Class | What it does |
|---|---|
has-3-cols | Exactly 3 columns (from has-1-cols to has-12-cols) |
has-1-cols-mobile, has-4-cols-desktop | Column count depending on width |
is-col-span-2, is-row-span-2 | The cell takes 2 columns or 2 rows |
is-col-start-2 | The cell starts at the second column |
is-gap-1 … is-gap-8 | Gap between cells, 0.5 rem per step |
Suffixes such as -mobile on a fixed-grid look at the width of the block itself rather than the whole window: Bulma uses container queries for them.
Common mistake
Putting has-3-cols directly on the grid. This modifier only works on the fixed-grid wrapper, with the grid inside it. On a lone grid it does nothing, and the cells are laid out by their minimum width.