Настройка ширины колонок

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

Свойство columnWidth

Параметр columnWidth отвечает за ширину колонок сетки. Его можно задавать несколькими способами:

  1. Числовое значение – задается в пикселях:
var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200
});

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

  1. CSS-селектор – можно указать элемент, который определяет ширину колонок:
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer'
});

Элемент с классом .grid-sizer служит эталоном. Packery вычисляет ширину колонок по его размеру, что позволяет легко использовать адаптивные сетки.

  1. Функция – иногда требуется динамическое вычисление ширины:
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  columnWidth: function() {
    return window.innerWidth / 4;
  }
});

Здесь ширина колонок изменяется в зависимости от ширины окна, создавая сетку с четырьмя колонками.

Использование .grid-sizer и .gutter-sizer

Для точной настройки ширины колонок часто применяют вспомогательные элементы:

  • .grid-sizer — задает базовую ширину колонок.
  • .gutter-sizer — задает промежуток (gutter) между колонками.

Пример разметки:

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

И соответствующая инициализация Packery:

var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer'
});

Преимущество такого подхода — легкая адаптация сетки при изменении стилей CSS, например, при использовании медиа-запросов.

Автоматическая подгонка элементов

Packery автоматически подстраивает элементы под ширину колонок. Важно учитывать, что если ширина элемента больше ширины колонки, он займёт несколько колонок. Для контроля этого используется CSS-свойство:

.grid-item {
  width: 2 * var(--column-width);
}

При использовании .grid-sizer ширина колонок может быть задана через CSS-переменные:

.grid-sizer {
  width: 25%;
}

Таким образом, сетка становится резиновой, а Packery адаптирует расположение элементов без необходимости пересчитывать JavaScript.

Адаптивность и ресайз окна

Packery поддерживает динамическое перераспределение элементов при изменении ширины окна. Для этого обычно вызывают метод layout() после изменения размеров контейнера:

window.addEventListener('resize', function() {
  pckry.layout();
});

Если используется относительная ширина колонок (%), сетка автоматически подстраивается под новое значение, а элементы корректно перераспределяются по колонкам.

Советы по настройке ширины колонок

  • Использовать .grid-sizer и .gutter-sizer для точной адаптивной сетки.
  • Минимизировать использование фиксированных чисел, если нужна резиновая сетка.
  • Учитывать, что элементы могут занимать несколько колонок, поэтому планировать ширину элементов заранее.
  • При динамическом изменении размера окна всегда вызывать pckry.layout() для перерасчета компоновки.

Настройка ширины колонок в Packery — это баланс между CSS-стилями и параметрами инициализации. Правильная комбинация columnWidth, вспомогательных элементов и адаптивных стилей позволяет создавать сетки, которые остаются визуально аккуратными и функциональными на любых экранах.

Оглавление