Процентная ширина элементов

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

В Isotope процентная ширина элементов контролируется через параметр columnWidth и CSS-свойства элементов.

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

Для корректной работы с процентной шириной важно правильно задать стили контейнера и элементов:

.grid {
  width: 100%;
}

.grid-item {
  width: 25%; /* Четыре элемента в ряду */
  float: left;
}
  • width: 25% — задаёт относительную ширину элемента.
  • float: left — обеспечивает выравнивание элементов по рядам.

В случае использования Isotope, рекомендуется задавать box-sizing: border-box для элементов, чтобы внутренние отступы и границы не нарушали расчёт ширины:

.grid-item {
  box-sizing: border-box;
  padding: 10px;
}

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

Параметр columnWidth в Isotope позволяет задать ширину колонки для элементов сетки. Он может принимать несколько форм:

  1. Числовое значение в пикселях — фиксированная ширина колонки:
var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 200
});
  1. Селектор элемента — ширина будет определяться по ширине указанного элемента:
var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer'
});
  1. Функция или процент — при использовании процентной ширины, обычно создаётся невидимый элемент-сайзер:
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>
.grid-sizer {
  width: 25%;
}
var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer'
});
  • percentPosition: true — ключевой параметр, который позволяет Isotope корректно интерпретировать процентные значения ширины элементов.

Адаптивная сетка

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

@media (max-width: 1200px) {
  .grid-sizer {
    width: 33.3333%; /* три элемента в ряду */
  }
}

@media (max-width: 768px) {
  .grid-sizer {
    width: 50%; /* два элемента в ряду */
  }
}

@media (max-width: 480px) {
  .grid-sizer {
    width: 100%; /* один элемент в ряду */
  }
}

Isotope автоматически перерассчитывает позиции элементов при изменении ширины контейнера, сохраняя плотное заполнение сетки.

Смешанные размеры элементов

Можно комбинировать элементы разной ширины и высоты, задавая процентные размеры каждому элементу отдельно:

.grid-item.w2 { width: 50%; }
.grid-item.w3 { width: 75%; }
.grid-item.w1 { width: 25%; }
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item w1"></div>
  <div class="grid-item w2"></div>
  <div class="grid-item w3"></div>
</div>

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

Важные нюансы

  • Отступы. При использовании margin необходимо учитывать их в расчётах ширины, либо использовать box-sizing: border-box.
  • Пересчёт сетки. После изменения размеров элементов динамически через JavaScript, нужно вызвать метод:
iso.layout();

  • Скрытые элементы. При использовании фильтров (filter) Isotope корректно перераспределяет элементы, сохраняя пропорции и процентные ширины.

  • Производительность. Большое количество элементов с процентной шириной и сложной анимацией может влиять на производительность. В таких случаях рекомендуется использовать transform вместо top/left для анимации позиций.

Заключение по настройке

Использование процентной ширины элементов в Isotope позволяет создавать полностью адаптивные сетки с гибким количеством элементов в ряду, легко подстраивающимися под любые размеры экрана. Комбинирование .grid-sizer, percentPosition: true и медиазапросов обеспечивает максимальную контролируемость макета и плавность работы библиотечного механизма.

Оглавление