Брейкпоинты и медиазапросы

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

Определение брейкпоинтов

Брейкпоинты задаются в опциях Gridstack через объект breakpoints. Например:

const grid = GridStack.init({
    column: 12,
    breakpoints: {
        lg: 1200,
        md: 996,
        sm: 768,
        xs: 480
    },
    minWidth: 300
});
  • lg, md, sm, xs — ключи, соответствующие диапазонам ширины экрана.
  • Значения — минимальная ширина в пикселях, с которой будет применяться данный брейкпоинт.

При изменении ширины окна Gridstack автоматически определяет текущий активный брейкпоинт и корректирует сетку согласно заданным настройкам.

Настройка колонок для разных брейкпоинтов

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

const grid = GridStack.init({
    column: 12,
    breakpoints: {
        lg: 1200,
        md: 996,
        sm: 768,
        xs: 480
    },
    columns: {
        lg: 12,
        md: 10,
        sm: 6,
        xs: 4
    }
});
  • columns — ключевой параметр для управления количеством колонок на каждом брейкпоинте.
  • Это позволяет, например, на маленьких экранах уменьшить количество колонок, чтобы виджеты занимали больше места и не выглядели сжатыми.

Использование медиазапросов для точной адаптации

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

@media (max-width: 768px) {
    .grid-stack-item-content {
        font-size: 14px;
        padding: 8px;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .grid-stack-item-content {
        font-size: 16px;
        padding: 12px;
    }
}

@media (min-width: 1201px) {
    .grid-stack-item-content {
        font-size: 18px;
        padding: 16px;
    }
}
  • Медиазапросы дополняют функциональность Gridstack, позволяя контролировать визуальные элементы внутри виджетов, не изменяя их позиционирование.

Адаптивные размеры виджетов

Gridstack поддерживает настройку размеров виджетов отдельно для каждого брейкпоинта. Это делается через data-атрибуты:

<div class="grid-stack-item"
     data-gs-x="0" data-gs-y="0"
     data-gs-width="4" data-gs-height="2"
     data-gs-width-md="6" data-gs-height-md="3"
     data-gs-width-sm="12" data-gs-height-sm="2">
    <div class="grid-stack-item-content">Виджет</div>
</div>
  • data-gs-width-* и data-gs-height-* позволяют задать ширину и высоту виджета для конкретного брейкпоинта.
  • Gridstack автоматически переключает размеры виджетов при изменении активного брейкпоинта.

События при изменении брейкпоинта

Gridstack генерирует событие change, которое можно использовать для отслеживания адаптивных изменений:

grid.on('change', function(event, items) {
    items.forEach(item => {
        console.log(`Виджет ${item.el.id} изменил размер на ${item.width}x${item.height}`);
    });
});

Также есть событие breakpointChanged, которое срабатывает, когда активный брейкпоинт изменяется:

grid.on('breakpointChanged', function(event, newBreakpoint, oldBreakpoint) {
    console.log(`Брейкпоинт изменился с ${oldBreakpoint} на ${newBreakpoint}`);
});

Это позволяет динамически подстраивать интерфейс и выполнять дополнительные действия при смене размеров экрана.

Советы по организации брейкпоинтов

  • Использовать не менее 3–4 брейкпоинтов, чтобы покрыть основные типы устройств.
  • Настраивать количество колонок и размеры виджетов для каждого брейкпоинта, чтобы избежать сжатия контента.
  • Комбинировать Gridstack и CSS-медиазапросы для полной адаптивности и контроля визуальной части.
  • Тестировать сетку на реальных устройствах и в браузерах с разными размерами окна, чтобы убедиться в корректной работе всех брейкпоинтов.

Адаптивное изменение поведения виджетов

Gridstack позволяет менять не только размеры, но и поведение виджетов на разных брейкпоинтах. Например, можно отключить перетаскивание или ресайз на мобильных устройствах:

grid.enableMove(false, 'sm'); // отключаем перетаскивание на sm
grid.enableResize(false, 'sm'); // отключаем ресайз на sm

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

Динамическое обновление брейкпоинтов

Брейкпоинты можно изменять после инициализации сетки, используя метод setOptions:

grid.setOptions({
    breakpoints: {
        lg: 1300,
        md: 1000,
        sm: 700,
        xs: 400
    },
    columns: {
        lg: 12,
        md: 10,
        sm: 6,
        xs: 4
    }
});
grid.on('breakpointChanged', function(e, newBp, oldBp) {
    console.log(`Брейкпоинт обновлен с ${oldBp} на ${newBp}`);
});

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

Gridstack.js сочетает гибкость JavaScript и адаптивность CSS-медиазапросов, позволяя строить сложные, отзывчивые интерфейсы с точным контролем поведения и размеров виджетов на любом устройстве.

Оглавление