Сетка Grid

Сетка в Naive UI представляет собой гибкую и мощную систему для построения макетов интерфейса. Основной концепт опирается на разделение пространства на строки (rows) и колонки (columns), что позволяет легко управлять компоновкой компонентов и адаптивностью интерфейса.

Контейнер Grid

Основной контейнер сетки создается с помощью компонента n-grid. Его ключевые свойства:

  • cols — количество колонок в сетке. По умолчанию равняется 24.
  • gap — расстояние между колонками и строками, можно задавать как одно значение (px), либо массив [rowGap, columnGap].
  • x-gap, y-gap — отдельное управление горизонтальными и вертикальными промежутками.
  • responsive — объект для настройки адаптивного поведения сетки на разных ширинах экрана.

Пример базового контейнера:

<n-grid :cols="12" :gap="16">
  <n-grid-item :span="4">Колонка 1</n-grid-item>
  <n-grid-item :span="4">Колонка 2</n-grid-item>
  <n-grid-item :span="4">Колонка 3</n-grid-item>
</n-grid>

В данном примере используется 12-колоночная сетка, а каждый элемент занимает 4 колонки.

Компонент GridItem

n-grid-item представляет отдельный блок в сетке. Основные свойства:

  • span — количество колонок, которое занимает элемент.
  • offset — сдвиг элемента относительно начала строки (от 0 до общего количества колонок).
  • order — определяет порядок отображения элементов при flex-компоновке.
<n-grid :cols="12" :gap="16">
  <n-grid-item :span="6">Левая часть</n-grid-item>
  <n-grid-item :span="6" :offset="0">Правая часть</n-grid-item>
</n-grid>

Адаптивность и медиа-запросы

Naive UI поддерживает адаптивность через свойства responsive. Пример настройки для разных размеров экрана:

<n-grid :cols="12" :gap="16" :responsive="{ xs: 4, sm: 6, md: 12 }">
  <n-grid-item :span="{ xs: 4, sm: 6, md: 12 }">Контент</n-grid-item>
</n-grid>
  • xs — экраны до 576px.
  • sm — экраны от 576px до 768px.
  • md — экраны от 768px до 992px.
  • lg и xl — большие разрешения.

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

Вложенные сетки

Сетка может содержать другие сетки, создавая сложные макеты. Вложенные n-grid наследуют настройки родительского контейнера, но могут переопределять их:

<n-grid :cols="12" :gap="16">
  <n-grid-item :span="12">
    <n-grid :cols="6" :gap="8">
      <n-grid-item :span="3">Вложенная 1</n-grid-item>
      <n-grid-item :span="3">Вложенная 2</n-grid-item>
    </n-grid>
  </n-grid-item>
</n-grid>

Управление выравниванием

Сетка использует flex-подход, поэтому доступны свойства выравнивания:

  • justify — горизонтальное выравнивание (start, center, end, space-around, space-between).
  • align — вертикальное выравнивание (top, middle, bottom).

Пример:

<n-grid :cols="12" justify="space-between" align="middle">
  <n-grid-item :span="4">Элемент 1</n-grid-item>
  <n-grid-item :span="4">Элемент 2</n-grid-item>
</n-grid>

Использование переменных стилей и gap

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

<n-grid :cols="12" style="--n-gap: 24px;">
  <n-grid-item :span="6">Элемент с увеличенным gap</n-grid-item>
  <n-grid-item :span="6">Элемент с увеличенным gap</n-grid-item>
</n-grid>

Это позволяет централизованно управлять интервалами между элементами без изменения разметки каждого блока.

Практические советы

  • Минимизация span: Не превышать общее количество колонок (cols) в одной строке, чтобы избежать автоматического переноса.
  • Использование offset: Позволяет создавать асимметричные макеты и управлять пустым пространством.
  • Вложенные сетки: Использовать только при необходимости сложной структуры, иначе проще разделять на строки с отдельными n-grid.
  • Адаптивность: Всегда задавать значения responsive для ключевых точек преломления, чтобы интерфейс выглядел корректно на мобильных и десктопных устройствах.

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

Оглавление