Сетка grid

В Bulma 1.0 появилась вторая сетка — на CSS Grid. Если колонки (columns) хороши для ряда из двух-трёх блоков разной ширины, то grid удобен для множества одинаковых ячеек: галерея фото, карточки блюд, плитки статистики. Ячейки сами переносятся на новую строку, и считать ширины не нужно.

Ячейки, которые раскладываются сами

Блок с классом grid, внутри — ячейки cell:

<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">Брускетта</div>
  <div class="cell has-background-light p-3">Минестроне</div>
  <div class="cell has-background-light p-3">Карбонара</div>
  <div class="cell has-background-light p-3">Лазанья</div>
  <div class="cell has-background-light p-3">Тирамису</div>
  <div class="cell has-background-light p-3">Панна-котта</div>
</div>

Ячейки встают в ряд и переносятся, когда места не хватает. Каждая ячейка не уже 9 rem: в узком окне их будет две в ряд, в широком — шесть. Класс p-3 только добавляет внутренний отступ.

Минимальная ширина ячейки

Модификатор is-col-min-N меняет минимальную ширину: каждая ступень — 1,5 rem, от is-col-min-1 (1,5 rem) до is-col-min-32 (48 rem). Для карточек блюд с фото подойдёт is-col-min-10 — 15 rem:

<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="Паста"></div>
  <div class="cell"><img src="/media/photo-400x250.jpg" alt="Пицца"></div>
  <div class="cell"><img src="/media/photo-400x250.jpg" alt="Салат"></div>
</div>

Фотографии не становятся уже 15 rem: если трём не хватает места, третья переходит на новую строку.

Фиксированное число колонок

Когда нужно ровно три колонки, оберните grid в блок fixed-grid с модификатором has-3-cols:

<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">Заказы: 48</div>
    <div class="cell has-background-info-light p-3">Гости: 120</div>
    <div class="cell has-background-warning-light p-3">Выручка: €2400</div>
    <div class="cell is-col-span-2 has-background-light p-3">График за неделю</div>
    <div class="cell has-background-light p-3">Отзывы</div>
  </div>
</div>

Три плитки статистики админ-панели в первой строке, во второй — широкая ячейка на две колонки и одна обычная. Модификатор ячейки is-col-span-2 растягивает её на две колонки, is-row-span-2 — на две строки.

Суффиксы вроде -mobile у fixed-grid смотрят на ширину самого блока, а не всего окна: в Bulma для этого используются контейнерные запросы.

Частая ошибка

Ставить has-3-cols прямо на grid. Этот модификатор работает только у обёртки fixed-grid, а внутри неё должен лежать grid. На одиночном grid он ничего не сделает, и ячейки разложатся по минимальной ширине.