Изменение количества колонок

Masonry — это библиотека для построения сеток с динамической высотой элементов, которая автоматически размещает блоки так, чтобы минимизировать пустое пространство. Одним из ключевых аспектов настройки сетки является управление количеством колонок, что напрямую влияет на визуальную плотность и адаптивность макета.

Свойство `columnWidth`

Свойство columnWidth задаёт ширину колонок в пикселях или в виде CSS-селектора элемента. Masonry использует его для расчёта, сколько колонок может поместиться в контейнере:

const msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10
});

itemSelector — CSS-селектор элементов сетки.
columnWidth — фиксированная ширина колонок (например, 200px) или элемент сетки, ширина которого используется как шаблон.
gutter — промежуток между колонками, влияет на визуальную плотность.

Если columnWidth указан в процентах или используется элемент-шаблон с адаптивной шириной, количество колонок автоматически изменяется при изменении ширины контейнера.

Адаптивное количество колонок через CSS

Masonry не ограничивает адаптивность сетки. Количество колонок можно изменять через CSS, задавая размер элементов сетки в процентах:

.grid-item {
  width: 33.33%; /* 3 колонки */
}

@media (max-width: 800px) {
  .grid-item {
    width: 50%; /* 2 колонки */
  }
}

@media (max-width: 500px) {
  .grid-item {
    width: 100%; /* 1 колонка */
  }
}

Использование процентов позволяет сетке плавно адаптироваться к разной ширине экрана.
Masonry автоматически пересчитывает позиции при ресайзе окна, если установлен resize: true.

Пересчёт колонок динамически

Для динамических интерфейсов, где элементы добавляются или удаляются, необходимо пересчитывать количество колонок вручную через метод layout():

msnry.appended(newItems); // Добавление новых элементов
msnry.layout();           // Пересчёт расположения колонок

appended() — добавляет новые элементы в сетку.
layout() — перерассчитывает позиции всех элементов с учётом текущей ширины колонок.

Если требуется полностью изменить ширину колонок после инициализации:

msnry.options.columnWidth = 150;
msnry.layout();

Masonry учитывает новую ширину и пересчитывает, сколько колонок помещается в контейнере.

Использование элемента-шаблона для колонок

Можно задать columnWidth как элемент сетки, что позволяет использовать разные размеры блоков без жесткой фиксации ширины:

const msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

grid-sizer — невидимый элемент внутри .grid, задающий базовую ширину колонок.
percentPosition: true — использование процентов для позиционирования, удобно для адаптивных макетов.

Эта схема особенно полезна для сложных сеток, где элементы могут иметь различную ширину, но требуется единообразное распределение по колонкам.

Управление колонками через JavaScript при ресайзе

Для более гибкой настройки количества колонок можно использовать событие resize окна:

window.addEventListener('resize', () => {
  const containerWidth = document.querySelector('.grid').clientWidth;
  const newColumnWidth = containerWidth > 1200 ? 250 : 150;
  msnry.options.columnWidth = newColumnWidth;
  msnry.layout();
});

Расчёт ширины колонок выполняется динамически в зависимости от ширины контейнера.
Это позволяет создавать сетки с динамическим количеством колонок, не меняя CSS вручную.

Контроль интервала между колонками

Помимо ширины колонок, важно учитывать gutter — промежуток между колонками:

const msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 20
});

Увеличение gutter уменьшает количество колонок, помещающихся в контейнере.
Уменьшение — повышает плотность сетки, но может сделать интерфейс перегруженным.