Размеры сетки и колонок

В Gridstack.js размеры сетки задаются через параметры конфигурации, которые определяют количество колонок, высоту рядов, отступы между элементами и общую ширину контейнера. Основные свойства для управления размерами сетки:

  • column — количество колонок в сетке. По умолчанию 12, но может быть изменено под нужды макета.
  • cellHeight — высота ячейки в пикселях. Может быть числом или функцией, возвращающей число.
  • verticalMargin — вертикальный отступ между элементами, задается в пикселях.
  • margin — общий отступ между элементами, можно задавать массивом [горизонтальный, вертикальный].
  • width — ширина сетки. По умолчанию сетка адаптивна и занимает всю ширину контейнера, но можно задать фиксированное значение.

Пример конфигурации:

const grid = GridStack.init({
  column: 6,
  cellHeight: 80,
  margin: 10,
  width: 600
});

Настройка колонок

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

  • Изменение количества колонок: позволяет создавать макеты с разной плотностью элементов.

    grid.column(8); // обновление количества колонок на 8

  • Динамическое изменение ширины колонок: ширина колонки автоматически подстраивается под контейнер, если не задана фиксированная ширина.

  • Отзывчивость: количество колонок можно менять при изменении ширины окна, используя параметры breakpoints и column для разных разрешений.

Высота и вертикальные размеры элементов

Каждый элемент сетки определяется по ширине (w) и высоте (h) в ячейках. Пример определения размеров элемента:

<div class="grid-stack-item" gs-w="2" gs-h="3">
  <div class="grid-stack-item-content">Элемент</div>
</div>
  • gs-w — количество колонок, занимаемых элементом.
  • gs-h — количество рядов по высоте.
  • Элементы автоматически выравниваются по сетке, учитывая заданные размеры.

Изменение высоты через Jav * aScript:

const item = grid.getGridItems()[0]; 
grid.update(item, {w: 3, h: 4});

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

Gridstack.js поддерживает адаптивность за счет breakpoints. Это позволяет менять количество колонок для разных размеров экрана:

const grid = GridStack.init({
  column: 12,
  breakpoints: {
    1200: 12,
    992: 8,
    768: 6,
    576: 4
  }
});
  • На больших экранах используется 12 колонок, на планшетах 6–8, на мобильных устройствах 4.
  • Элементы масштабируются по ширине автоматически, сохраняя пропорции.

Контроль отступов и промежутков

Вертикальные и горизонтальные промежутки задаются через margin или verticalMargin:

GridStack.init({
  column: 6,
  cellHeight: 100,
  margin: [20, 15] // [горизонтальный, вертикальный]
});
  • Отступы влияют на визуальное восприятие плотности элементов.
  • Можно задать нулевой отступ для плотного расположения элементов.
  • При динамическом изменении размеров сетки отступы сохраняются, а элементы перетасовываются автоматически.

Функции для работы с размерами

Gridstack.js предоставляет методы для работы с размерами сетки и элементов:

  • grid.cellHeight() — возвращает текущую высоту ячейки или устанавливает новую.
  • grid.column() — возвращает текущее количество колонок или обновляет их.
  • grid.update(item, {w, h}) — изменяет размер конкретного элемента.
  • grid.compact() — уплотняет сетку после изменения размеров, убирая пустое пространство.

Использование относительных единиц

Для более гибких макетов можно использовать относительные размеры:

GridStack.init({
  column: 12,
  cellHeight: '10vh', // высота ячейки как 10% высоты окна
});
  • Позволяет создавать сетки, которые адаптируются к высоте окна.
  • Особенно полезно для дашбордов и панелей с динамическим контентом.

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

Помимо стандартного задания размеров в ячейках, Gridstack.js позволяет задавать фиксированные размеры через CSS:

.grid-stack-item-content {
  width: 150px;
  height: 200px;
}
  • Фиксированные размеры могут использоваться для элементов, которые не должны изменять свои пропорции при адаптивной верстке.
  • При этом сетка учитывает эти размеры при размещении соседних элементов.

Итоговая структура сетки

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

  • Колонки задают горизонтальную сетку и плотность элементов.
  • Высота и w/h элементов определяют их пропорции.
  • Отступы регулируют визуальное разделение элементов.
  • Адаптивность и breakpoints обеспечивают корректное отображение на разных устройствах.

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

Оглавление