columnWidth

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

Форматы значения columnWidth

columnWidth может принимать несколько типов значений:

  1. Число (в пикселях) Указывает фиксированную ширину колонки в пикселях. Например:

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

    В этом случае каждая колонка будет иметь ширину 100px, и элементы будут подстраиваться под это значение. Если ширина контейнера не делится ровно на columnWidth, последние колонки могут быть частично заполнены, что нужно учитывать при дизайне.

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

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

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

  3. Функция В качестве значения можно передать функцию, которая возвращает ширину колонок динамически:

    var pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  columnWidth: function(containerWidth) {
    return containerWidth / 4; // делим контейнер на 4 колонки
  }
});

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

Взаимодействие с gutter

columnWidth тесно связан с параметром gutter, который задаёт промежутки между колонками. Если указана ширина колонки через число, gutter прибавляется к этой ширине для расчета позиции следующей колонки. Пример:

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

В этом случае каждая колонка будет занимать 130px с учётом промежутка, что необходимо учитывать при расчётах макета.

Использование grid-sizer для точного позиционирования

Использование дополнительного элемента .grid-sizer позволяет легко управлять шириной колонок и делает сетку более предсказуемой. Пример разметки:

Инициализация:

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

.grid-sizer может быть невидимым (например, с display: none не работает, лучше использовать visibility: hidden или opacity: 0), и он служит только для расчета сетки.

Адаптивная сетка с процентной шириной колонок

Если колонка задана через селектор, в CSS можно использовать процентные значения:

.grid-sizer { width: 25%; }
.grid-item { width: 25%; }

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

Подстройка элементов разной ширины

Packery поддерживает элементы разных размеров, но точное позиционирование зависит от columnWidth. Рекомендуется, чтобы ширина каждого элемента была кратна колонке:

.grid-item--w2 { width: 50%; } /* занимает 2 колонки */
.grid-item--w3 { width: 75%; } /* занимает 3 колонки */

Инициализация с grid-sizer гарантирует, что все элементы выстроятся ровно по колонкам.

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

  • Для фиксированной сетки использовать число в пикселях.
  • Для адаптивной сетки лучше использовать grid-sizer и процентные значения.
  • Проверять совместимость с gutter, чтобы избежать неожиданных смещений.
  • Элементы с шириной, не кратной колонке, могут вызывать “пустоты” в сетке.

columnWidth является основой точного и предсказуемого позиционирования элементов в Packery, от него зависят эстетика и эффективность использования пространства в любой сетке.

Оглавление