Процентные значения

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

Контейнер и процентные размеры

Контейнер, инициализируемый через Packery, может иметь как фиксированные размеры, так и размеры, заданные в процентах. Например:

.grid {
  width: 100%;
}
.grid-item {
  width: 25%;
  height: 200px;
}

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

Метод columnWidth и процентные значения

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

var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});
  • columnWidth может быть указан в пикселях, либо через CSS-класс, который задает размер колонки в процентах.
  • percentPosition: true переводит расчёты Packery из абсолютных пикселей в относительные проценты. Это позволяет сохранять пропорции при изменении размеров контейнера.

Пример CSS для .grid-sizer:

.grid-sizer {
  width: 25%;
}

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

Адаптивное размещение элементов

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

Для обеспечения корректного поведения рекомендуется:

  1. Указывать ширину элементов в процентах.
  2. Использовать percentPosition: true при инициализации.
  3. Добавлять grid-sizer элемент для задания базового размера колонки.

Пример полной структуры:

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

Высота элементов и процентные значения

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

.grid-item {
  width: 33.3333%;
  height: 50%;
}

В этом случае высота элемента рассчитывается относительно высоты контейнера. При использовании percentPosition Packery корректно размещает такие элементы без наложений.

Работа с динамическим контентом

При добавлении элементов динамически через append или prepended важно учитывать, что новые элементы с процентными размерами автоматически включаются в пересчет сетки:

var newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);
pckry.appended(newItem);

Packery сразу вычисляет новые позиции элементов, сохраняя пропорции.

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

Опция fitWidth часто используется совместно с процентными размерами, чтобы сетка занимала только необходимую ширину:

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

При этом ширина контейнера автоматически подстраивается под количество элементов, сохраняя адаптивность.

Особенности и рекомендации

  • Процентные значения особенно удобны для адаптивных макетов с переменной шириной окна.
  • При использовании процентов следует точно контролировать дробные значения, чтобы элементы не выходили за пределы контейнера.
  • Комбинация grid-sizer + percentPosition: true является стандартной практикой при построении сеток с Packery.

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

Оглавление