Выравнивание элементов

Packery — это библиотека для создания динамических сеток, где элементы располагаются в упорядоченном, но свободном формате, с возможностью «залипания» к свободному пространству. Ключевым аспектом является контроль выравнивания элементов, что позволяет достичь аккуратного и визуально гармоничного расположения блоков.

Packery оперирует понятием grid layout: элементы не привязаны к строгим строкам и столбцам, а автоматически подбираются к свободным позициям. При этом выравнивание может происходить по разным осям: горизонтальной (лево, центр, право) и вертикальной (верх, центр, низ).

Настройка выравнивания через свойства

1. originLeft и originTop

Эти параметры задаются при инициализации Packery:

var pckry = new Packery( '.grid', {
  itemSelector: '.grid-item',
  gutter: 10,
  originLeft: true,  // выравнивание слева (false для справа)
  originTop: true    // выравнивание сверху (false для снизу)
});
  • originLeft: true — элементы выстраиваются начиная с левого края контейнера.
  • originLeft: false — выравнивание по правому краю.
  • originTop: true — элементы укладываются сверху вниз.
  • originTop: false — выравнивание снизу вверх.

Эти настройки особенно полезны при изменении языка интерфейса (LTR или RTL) или при нестандартных макетах.

2. Горизонтальное и вертикальное выравнивание через CSS

Packery учитывает размеры контейнера и элементов, поэтому можно комбинировать свойства CSS с параметрами библиотеки:

.grid {
  display: block;
  margin: 0 auto; /* центрирование всей сетки */
}

.grid-item {
  width: 100px;
  height: 100px;
  margin-bottom: 10px; /* отступы между элементами */
}
  • Использование margin: 0 auto позволяет центрировать весь контейнер сетки в родительском блоке.
  • margin-bottom задает вертикальный промежуток между элементами.
  • Для более гибкого контроля можно применять flex или inline-block к элементам внутри .grid, хотя Packery сам управляет позиционированием.

Методы управления расположением элементов

Packery предоставляет API для динамического выравнивания после инициализации:

1. layout()

pckry.layout();

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

2. fit()

var elem = document.querySelector('.grid-item');
pckry.fit(elem);

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

3. stamp()

var stampElem = document.querySelector('.stamp');
pckry.stamp(stampElem);

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

4. shiftLayout()

Позволяет перемещать элементы с сохранением их порядка, при этом выравнивание происходит более гладко и предсказуемо.

pckry.shiftLayout();

Учет разных размеров элементов

Packery автоматически управляет размером и положением элементов, даже если они отличаются по ширине и высоте. Для корректного выравнивания рекомендуется:

  • Задавать фиксированные размеры элементов или использовать percentage для адаптивного макета.
  • Указывать gutter при инициализации для контроля промежутков.
  • При динамическом изменении размеров элементов вызывать layout().
pckry.options.gutter = 20;
pckry.layout();

Центрирование элементов в контейнере

Packery по умолчанию выравнивает элементы по верхнему левому углу (или по параметрам originLeft/originTop). Для создания центрированной сетки можно использовать трюк с оберткой:

<div class="outer-grid">
  <div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
</div>
.outer-grid {
  display: flex;
  justify-content: center;
}

.grid {
  display: block;
}
  • Контейнер .outer-grid центрирует всю сетку горизонтально.
  • Packery продолжает управлять внутренними элементами, сохраняя свободную упаковку.

Динамическая подстройка выравнивания при изменении окна

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

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

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

Итоговые рекомендации по выравниванию

  • Использовать originLeft и originTop для контроля основных осей.
  • Добавлять gutter для аккуратного промежутка между элементами.
  • Для элементов разного размера вызывать layout() после изменения контента.
  • Центрировать сетку через обертку с CSS flex для визуальной симметрии.
  • При динамическом изменении размеров окна всегда пересчитывать сетку.

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

Оглавление