rowHeight

rowHeight — это ключевой параметр библиотеки Packery, определяющий высоту строки сетки для выравнивания элементов по вертикали. Его правильное использование позволяет создавать аккуратные, структурированные макеты с равномерными промежутками между элементами, даже если размеры блоков различаются.

Типы значений

Свойство rowHeight поддерживает несколько типов значений:

  1. Число Указывается фиксированная высота строки в пикселях.

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

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

  2. CSS-селектор строки-ориентира Вместо числа можно указать селектор элемента, который задаёт базовую высоту строки. Например, если внутри блока есть элемент .grid-sizer, его высота будет использована как rowHeight:

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

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

Влияние на размещение элементов

  • rowHeight влияет на выравнивание элементов по вертикали, но не изменяет их фактическую высоту. Если элемент выше, чем значение rowHeight, он занимает несколько строк.
  • Уменьшение rowHeight делает сетку более плотной, увеличивая количество строк, в то время как увеличение — создаёт больше пространства между блоками.

Использование вместе с columnWidth

Часто rowHeight комбинируется с параметром columnWidth, чтобы создавать фиксированную сетку:

var pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 120,
  rowHeight: 80,
  gutter: 10
});
  • columnWidth задаёт ширину колонки.
  • rowHeight задаёт высоту строки.
  • gutter задаёт отступ между элементами.

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

Адаптивные макеты

Если rowHeight задан через CSS-селектор, Packery автоматически подстраивается под изменения размера окна. Это делает сетку гибкой: элементы перестраиваются при изменении ширины контейнера, сохраняя аккуратное выравнивание.

.grid-sizer {
  height: 10vw; /* адаптивная высота строки */
}
var pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  rowHeight: '.grid-sizer'
});

Практические советы

  • Использование фиксированного числа удобно для макетов с постоянной высотой блоков.

  • Использование селектора предпочтительно для адаптивных сеток, где высота строки зависит от ширины экрана.

  • Для сложных макетов с элементами разной высоты можно комбинировать rowHeight с stamp и gutter, чтобы сохранить гармонию сетки.

  • При динамическом добавлении элементов в сетку рекомендуется вызывать метод layout() после изменения DOM, чтобы Packery корректно перерасчитал позиции:

    pckry.appended(newElems);
pckry.layout();

Визуальные эффекты

Правильная настройка rowHeight позволяет создавать эффекты стаканоподобной или кирпичной кладки, где элементы плавно «ложатся» друг на друга без зазоров. Особенно это важно для галерей изображений и адаптивных карточек.

Совместимость с анимацией

Packery поддерживает CSS-анимации при перестроении сетки. При изменении rowHeight можно добиться плавного перемещения элементов с помощью transition:

.grid-item {
  transition: transform 0.4s;
}

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

Итоговое правило

rowHeight — основной инструмент для вертикального выравнивания элементов в Packery. Фиксированное значение обеспечивает строгую сетку, а селектор CSS — гибкую адаптивную структуру. Комбинация с columnWidth, gutter и анимацией делает макет визуально упорядоченным, адаптивным и приятным для восприятия.

Оглавление