Изменение количества колонок

Gridstack.js предоставляет мощный механизм для построения адаптивных сеток с возможностью динамического изменения структуры. Одним из ключевых аспектов управления сеткой является изменение количества колонок (columns) в реальном времени, что позволяет создавать интерфейсы, оптимизированные под разные размеры экранов или пользовательские сценарии.

Свойство column

Количество колонок задаётся через свойство column при инициализации сетки:

const grid = GridStack.init({
    column: 12
});

Здесь сетка создаётся с 12 колонками. Каждая колонка пропорциональна общей ширине контейнера, а размеры виджетов (grid items) автоматически подстраиваются под это количество.

Важно: значение column должно быть положительным целым числом.

Динамическое изменение количества колонок

Gridstack.js позволяет менять количество колонок после инициализации сетки с помощью метода grid.column():

grid.column(8);

Этот вызов изменяет сетку на 8 колонок и автоматически перераспределяет все существующие виджеты.

Ключевые моменты при динамическом изменении:

  1. Перераспределение виджетов – Gridstack.js сохраняет текущие размеры и позиции виджетов в относительных единицах (w, x) и пересчитывает их для новой сетки.
  2. Минимальная и максимальная ширина – можно указать ограничения ширины виджетов, чтобы при уменьшении количества колонок они не теряли читаемость.
  3. Обратная совместимость – старые версии Gridstack могут не корректно перераспределять виджеты при уменьшении колонок, поэтому рекомендуется использовать версии 8+.

Использование медиа-запросов для адаптивных сеток

Для создания адаптивного интерфейса можно динамически менять количество колонок в зависимости от ширины окна:

function adjustColumns() {
    const width = window.innerWidth;
    if (width < 600) {
        grid.column(2);
    } else if (width < 900) {
        grid.column(4);
    } else {
        grid.column(12);
    }
}

window.addEventListener('resize', adjustColumns);
adjustColumns();

В этом примере сетка автоматически переключается между 2, 4 и 12 колонками, обеспечивая адаптивное расположение виджетов на мобильных устройствах, планшетах и десктопах.

Влияние на размеры виджетов

При изменении количества колонок размеры виджетов пересчитываются относительно новой ширины сетки.

  • w – ширина виджета в колонках.
  • x – позиция по оси X.
  • autoPosition – если включено, виджеты автоматически перемещаются, чтобы заполнить пустые ячейки.

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

grid.batchUpdate(); // приостановка перерисовки

grid.column(6); // изменение количества колонок

grid.commit(); // применение изменений

Использование batchUpdate и commit предотвращает мерцание интерфейса при массовом обновлении позиций.

Ограничение минимального и максимального количества колонок

Gridstack.js позволяет ограничивать сетку по минимальному и максимальному числу колонок через опцию minColumn и maxColumn:

const grid = GridStack.init({
    column: 12,
    minColumn: 2,
    maxColumn: 16
});

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

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

  • Использовать относительные единицы при установке ширины виджетов (w) для корректного перераспределения при изменении колонок.
  • Для адаптивных интерфейсов интегрировать динамическое изменение колонок с событиями resize.
  • Проверять визуальные эффекты при уменьшении колонок — иногда требуется ручная корректировка minW и maxW для виджетов, чтобы избежать наложений.
  • Для сеток с большим количеством виджетов использовать методы batchUpdate и commit, чтобы оптимизировать производительность.

Итоговое поведение сетки при смене колонок

  1. Gridstack пересчитывает позицию и размеры всех виджетов.
  2. Виджеты остаются в пределах ограничений (minW, maxW).
  3. Если autoPosition включён, виджеты автоматически заполняют свободное пространство.
  4. События сетки (change, added, removed) корректно вызываются для обновлённого расположения.

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

Оглавление