Колонки: размеры, адаптивность, отступы

По умолчанию колонки делят ряд поровну. Чтобы одна была шире другой, ей добавляют модификатор размера. Остальные колонки без размера делят оставшееся место.

Размеры словами

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns is-mobile">
  <div class="column is-two-thirds has-background-primary-light">Меню</div>
  <div class="column has-background-light">Корзина</div>
</div>

Меню занимает две трети ряда, корзина — оставшуюся треть. Модификатор is-mobile здесь и дальше нужен, чтобы ряд был виден и в узком превью.

Класс	Ширина
`is-full`	100%
`is-three-quarters`, `is-two-thirds`, `is-half`	75%, 66%, 50%
`is-one-third`, `is-one-quarter`, `is-one-fifth`	33%, 25%, 20%
`is-1` … `is-12`	части из 12, как в Bootstrap: `is-4` — треть
`is-narrow`	по ширине содержимого
`is-offset-one-quarter`, `is-offset-2`	отступ слева на эту ширину

Разные размеры на разных экранах

К размеру добавляют суффикс экрана. Тогда ширина действует только начиная с этой точки:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns is-multiline">
  <div class="column is-half-tablet is-one-quarter-desktop has-background-light">Карбонара</div>
  <div class="column is-half-tablet is-one-quarter-desktop has-background-light">Песто</div>
  <div class="column is-half-tablet is-one-quarter-desktop has-background-light">Лазанья</div>
  <div class="column is-half-tablet is-one-quarter-desktop has-background-light">Ризотто</div>
</div>

На телефоне и в узком превью блюда идут списком, на планшете — по два в ряд, на компьютере — по четыре. Откройте пример в своём файле и меняйте ширину окна, чтобы увидеть все три варианта. Модификатор is-multiline разрешает колонкам переноситься на новую строку, иначе все четыре сжались бы в один ряд.

Промежутки между колонками

Промежуток задают ряду классами от is-0 до is-8: каждая ступень — 0,25 rem, по умолчанию действует is-3 (0,75 rem). Класс is-gapless убирает промежуток совсем:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns is-mobile is-gapless">
  <div class="column has-background-primary">Пн–Пт</div>
  <div class="column has-background-primary-dark has-text-white">Сб–Вс</div>
</div>

Две колонки стоят вплотную, как одна полоса. Классы промежутков тоже принимают суффиксы: is-1-mobile is-6-desktop.

Вложенные колонки

Внутри колонки можно снова создать ряд columns. Он делит ширину уже этой колонки:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns is-mobile">
  <div class="column is-one-quarter has-background-light">Категории</div>
  <div class="column">
    <div class="columns is-mobile">
      <div class="column has-background-info-light">Блюдо 1</div>
      <div class="column has-background-info-light">Блюдо 2</div>
    </div>
  </div>
</div>

Слева узкая колонка категорий, справа большая колонка, которая сама разделена на две. Так в админ-панели раскладывают ряд карточек со статистикой внутри основной области.

Выравнивание

Класс ряда	Что делает
`is-centered`	Центрирует колонки, если они не заполняют ряд
`is-vcentered`	Выравнивает колонки по вертикали по центру
`is-desktop`	Колонки включаются только с 1024 px

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

Ставить колонкам размеры, которые в сумме больше 100%, и забыть is-multiline. Без него ряд не переносится, и последние колонки вылезают за правый край страницы. Если колонок больше, чем помещается в ряд, всегда добавляйте ряду is-multiline.

Спасибо, что читаете!