Свойство columnWidth

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

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

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

    columnWidth: 200

    В этом случае каждая колонка будет иметь фиксированную ширину 200px. Элементы будут размещаться в сетке с учётом этой величины, а Isotope автоматически вычислит, сколько колонок помещается в контейнер.

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

    columnWidth: '.grid-sizer'

    В этом случае Isotope измеряет ширину первого элемента, соответствующего селектору, и использует её как шаблон для всех колонок. Это особенно удобно для адаптивных сеток, когда ширина элементов задаётся через CSS.

  3. Строковое значение ‘auto’ Автоматический режим вычисляет ширину колонок исходя из размеров контейнера и количества элементов, минимизируя пустое пространство. Такой режим подходит для динамических сеток с элементами разного размера.

Взаимодействие с другими свойствами

  • percentPosition Если используется процентное позиционирование (percentPosition: true), ширина колонок, заданная через columnWidth, интерпретируется как процент от ширины контейнера. Это позволяет создавать полностью адаптивные сетки без необходимости прописывать фиксированные пиксели.

  • gutter Расстояние между колонками можно контролировать отдельно с помощью свойства gutter. Оно работает совместно с columnWidth и позволяет точно настроить интервал между элементами:

    columnWidth: 200,
gutter: 10

    В этом примере каждая колонка будет шириной 200px с 10px промежутком между соседними колонками.

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

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

  • Для сеток с одинаковыми элементами лучше использовать числовое значение или фиксированный CSS-селектор. Это повышает производительность, так как Isotope не тратит ресурсы на повторное измерение ширины элементов.

  • Для адаптивных сеток с изменяющейся шириной контейнера рекомендуется использовать селектор и percentPosition: true. Например:

    var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

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

  • Необходимо учитывать padding и margin элементов. Если ширина элемента включает padding, Isotope корректно учитывает это при расчётах колонок, однако дополнительные внешние отступы могут создавать визуальные рассогласования, если их не учитывать при выборе gutter.

Измерение ширины с помощью .grid-sizer

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

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>
.grid-sizer {
  width: 25%; /* четверть ширины контейнера */
}

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

Динамическая смена columnWidth

Isotope позволяет изменять ширину колонок после инициализации сетки с помощью метода layout:

$grid.isotope({
  columnWidth: 150
});

$grid.isotope('layout');

После изменения columnWidth метод layout перерассчитает расположение всех элементов в контейнере, сохраняя согласованность сетки. Это полезно при адаптивной подстройке сетки к пользовательским изменениям интерфейса, например, при смене режима просмотра или при ресайзе окна.

Выводы по использованию

  • columnWidth определяет базовую ширину колонок и является основным инструментом контроля сетки.
  • Выбор между числовым значением, селектором и авто-режимом зависит от структуры элементов и требований к адаптивности.
  • Совместное использование с gutter и percentPosition позволяет создавать сложные и гибкие сетки с минимальными усилиями.

Правильная настройка columnWidth обеспечивает визуально аккуратную, оптимизированную и динамически подстраивающуюся сетку элементов в Isotope.

Оглавление