Принципы работы с сеткой

Сеточная система Vuetify строится на flexbox-подходе, что обеспечивает гибкость и адаптивность макета. Основные строительные блоки сетки — это v-container, v-row и v-col.

  • v-container — контейнер верхнего уровня, который задаёт отступы и максимальную ширину содержимого. Он может быть фиксированной ширины (fluid=false) или растягиваться на всю ширину экрана (fluid=true).
  • v-row — ряд внутри контейнера, формирующий горизонтальное распределение колонок. Ряд использует flexbox, что позволяет управлять выравниванием, направлением и переносом колонок.
  • v-col — колонка, которая автоматически адаптируется под размер содержимого и настройки сетки. Можно задавать ширину колонки в процентах или единицах сетки.

Система 12 колонок

Vuetify использует 12-колоночную сетку, где одна строка делится на 12 равных частей. Ширина колонок задаётся с помощью пропсов:

<v-row>
  <v-col cols="6">Полколонки</v-col>
  <v-col cols="6">Полколонки</v-col>
</v-row>
  • cols — базовое количество колонок (1–12).
  • Можно использовать breakpoints для адаптивного дизайна: xs, sm, md, lg, xl. Например:
<v-col cols="12" sm="6" md="4" lg="3">
  Контент
</v-col>

Здесь колонка будет занимать всю ширину на мобильных устройствах (xs), половину на маленьких экранах (sm), треть на средних (md) и четверть на больших (lg).

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

v-row поддерживает гибкое выравнивание колонок по оси X и Y с помощью пропсов:

  • Горизонтальное выравнивание (justify):

    • justify-start — слева
    • justify-center — по центру
    • justify-end — справа
    • justify-space-between — равные промежутки
    • justify-space-around — промежутки вокруг элементов
    • justify-space-evenly — равномерное распределение

  • Вертикальное выравнивание (align):

    • align-start — сверху
    • align-center — по центру
    • align-end — снизу
    • align-baseline — по базовой линии текста
    • align-stretch — растянуть по высоте ряда

Пример выравнивания:

<v-row justify="center" align="center">
  <v-col cols="3">Колонка 1</v-col>
  <v-col cols="3">Колонка 2</v-col>
</v-row>

Адаптивные колонки и порядок

Колонки можно переставлять и скрывать на разных размерах экрана с помощью пропсов order и hidden-*:

<v-col cols="12" md="6" order="2" order-md="1">
  Контент A
</v-col>
<v-col cols="12" md="6" order="1" order-md="2">
  Контент B
</v-col>
  • order — определяет порядок колонок в ряду.
  • hidden-* — позволяет скрывать элементы на определённых брейкпоинтах: hidden-sm-and-down, hidden-md-and-up.

Гибкая ширина колонок

Vuetify поддерживает колонки с авто-шириной (auto) и фиксированной шириной (cols="N"). Для авто-ширины:

<v-row>
  <v-col cols="auto">Контент с авто-шириной</v-col>
  <v-col>Остальной контент</v-col>
</v-row>

Фиксированная ширина позволяет точнее контролировать макет, авто-ширина подстраивается под содержимое.

Вложенные ряды

Сетка Vuetify поддерживает вложенность: внутри колонки можно создавать новый v-row с собственными колонками:

<v-row>
  <v-col cols="8">
    <v-row>
      <v-col cols="6">Вложенная колонка 1</v-col>
      <v-col cols="6">Вложенная колонка 2</v-col>
    </v-row>
  </v-col>
  <v-col cols="4">Боковая колонка</v-col>
</v-row>

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

Отступы и зазоры

Отступы между колонками управляются через gap и встроенные утилиты Vuetify:

  • gap-0, gap-1, gap-2 … gap-12 — задают горизонтальный и вертикальный зазор между колонками.
  • pa-*, ma-* — padding и margin, где * — значение от 0 до 12.

Пример:

<v-row gap="4">
  <v-col cols="6">Колонка A</v-col>
  <v-col cols="6">Колонка B</v-col>
</v-row>

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

С помощью пропса direction можно менять направление ряда:

  • row — горизонтально (по умолчанию)
  • row-reverse — горизонтально, в обратном порядке
  • column — вертикально
  • column-reverse — вертикально, в обратном порядке

Пример вертикального ряда:

<v-row direction="column">
  <v-col cols="12">Верх</v-col>
  <v-col cols="12">Низ</v-col>
</v-row>

Заключение по сетке

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

Ключевые моменты, которые важно помнить:

  • 12-колоночная система и пропсы cols, sm, md, lg, xl.
  • Гибкое выравнивание с justify и align.
  • Адаптивный порядок и скрытие с order и hidden-*.
  • Вложенность рядов для сложных макетов.
  • Контроль за отступами через gap, pa-*, ma-*.

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

Оглавление