Отступы и промежутки

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

Свойство margin

margin — ключевой параметр, отвечающий за расстояние между виджетами в сетке. Он может быть задан как для всей сетки, так и индивидуально для каждого виджета.

const grid = GridStack.init({
  margin: 10 // устанавливает отступ 10px между виджетами
});

Особенности использования:

  • Значение может быть числом (px) или массивом [top, right, bottom, left] для индивидуальных отступов.
  • Можно использовать строку с CSS-значением, например "5px 10px".
  • Изменение margin после инициализации сетки возможно через метод grid.setOptions({ margin: 20 }).

Пример с индивидуальными отступами:

const grid = GridStack.init({
  margin: [5, 10, 15, 20] // top, right, bottom, left
});

Свойство cellHeight и вертикальные промежутки

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

const grid = GridStack.init({
  cellHeight: '80px',
  margin: 8
});

В случае использования cellHeight: 'auto' сетка подстраивается под содержимое, а промежутки остаются равными указанным в margin.

Настройка промежутков через CSS

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

.grid-stack {
  grid-gap: 12px; /* промежутки между элементами */
}

.grid-stack-item {
  padding: 5px; /* внутренние отступы виджета */
}
  • grid-gap управляет как горизонтальными, так и вертикальными промежутками.
  • padding внутри .grid-stack-item создаёт пространство между содержимым виджета и его рамкой.

Программное управление отступами

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

grid.margin(20); // изменяет отступ для всей сетки
grid.cellHeight(100); // устанавливает новую высоту ячеек

Для отдельных виджетов можно использовать метод update:

grid.update(widget, { w: 3, h: 2, x: 0, y: 0 });

Отступы между виджетами будут автоматически пересчитаны.

Интервал между виджетами при перетаскивании

Gridstack.js учитывает отступы не только при статическом размещении, но и во время drag & drop. Виджеты “прилипают” к сетке, соблюдая заданные margin и cellHeight. Настройка float: true может влиять на поведение:

const grid = GridStack.init({
  float: true, // позволяет свободно перемещать виджеты
  margin: 12
});

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

Резюме по настройке промежутков

  • margin — основной инструмент управления отступами между виджетами.
  • cellHeight — задаёт вертикальные промежутки и влияет на высоту ячеек.
  • CSS grid-gap и padding — дают дополнительный контроль над визуальными интервалами.
  • Методы grid.margin() и grid.cellHeight() позволяют динамически изменять отступы после инициализации.
  • Отступы учитываются при перетаскивании и изменении размера виджетов, обеспечивая целостность сетки.

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

Оглавление