Примеры типовых раскладок

В Vuetify система раскладок построена на гибкой сеточной модели, основанной на Flexbox. Основные элементы управления — это v-container, v-row и v-col.

  • v-container — ограничивает ширину контента и центрирует его на странице. Используется как обертка для всех элементов сетки.
  • v-row — формирует строки сетки. Элемент автоматически использует flex display, поддерживает отступы между колонками через проп gutter (или dense для плотной компоновки).
  • v-col — определяет колонки внутри строки. Можно управлять их шириной через пропсы cols, sm, md, lg, xl, задавая адаптивную ширину для разных размеров экрана.

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

<v-container>
  <v-row>
    <v-col cols="12" sm="6" md="4">
      Колонка 1
    </v-col>
    <v-col cols="12" sm="6" md="4">
      Колонка 2
    </v-col>
    <v-col cols="12" sm="12" md="4">
      Колонка 3
    </v-col>
  </v-row>
</v-container>

В этом примере каждая колонка занимает всю ширину на мобильных устройствах (cols="12"), половину на небольших (sm="6") и треть на средних экранах (md="4").

Использование плотной и растягивающейся сетки

Для плотной компоновки строк применяется проп dense в v-row:

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

Использование dense уменьшает стандартные отступы между колонками, что позволяет более компактно размещать элементы.

Проп align и justify позволяет управлять вертикальным и горизонтальным выравниванием:

  • align="center" — вертикальное выравнивание по центру.
  • justify="space-between" — равномерное распределение колонок с промежутками.

Типовые раскладки

Одноколоночная (single column)

Используется для мобильных интерфейсов или контента, требующего полной ширины:

<v-container>
  <v-row>
    <v-col cols="12">
      Основной контент
    </v-col>
  </v-row>
</v-container>

Двухколоночная (two columns)

Часто применяется для панели навигации и основного контента:

<v-container>
  <v-row>
    <v-col cols="12" md="4">
      Навигация
    </v-col>
    <v-col cols="12" md="8">
      Основной контент
    </v-col>
  </v-row>
</v-container>

Трехколоночная (three columns)

Подходит для дашбордов и сложных интерфейсов:

<v-container>
  <v-row>
    <v-col cols="12" md="3">
      Боковая панель
    </v-col>
    <v-col cols="12" md="6">
      Основной контент
    </v-col>
    <v-col cols="12" md="3">
      Дополнительная панель
    </v-col>
  </v-row>
</v-container>

Столбцы одинаковой ширины

Если ширина колонок не указана явно, Vuetify делит пространство равномерно:

<v-row>
  <v-col>Колонка 1</v-col>
  <v-col>Колонка 2</v-col>
  <v-col>Колонка 3</v-col>
</v-row>

Ассиметричная раскладка

Можно комбинировать колонки разной ширины для сложных макетов:

<v-row>
  <v-col cols="3">Левая панель</v-col>
  <v-col cols="6">Главный контент</v-col>
  <v-col cols="3">Правая панель</v-col>
</v-row>

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

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

  • xs — мобильные устройства
  • sm — планшеты
  • md — ноутбуки
  • lg — десктопы
  • xl — большие экраны

Пример адаптивной сетки:

<v-row>
  <v-col cols="12" sm="6" md="4" lg="3">Блок 1</v-col>
  <v-col cols="12" sm="6" md="4" lg="3">Блок 2</v-col>
  <v-col cols="12" sm="6" md="4" lg="3">Блок 3</v-col>
  <v-col cols="12" sm="6" md="4" lg="3">Блок 4</v-col>
</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>

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

Использование спейсеров и отступов

Vuetify поддерживает v-spacer для автоматического распределения пространства между элементами:

<v-row align="center">
  <v-col cols="4">Левый блок</v-col>
  <v-spacer></v-spacer>
  <v-col cols="4">Правый блок</v-col>
</v-row>

Отступы между строками и колонками можно регулировать через пропсы pa-*, ma-* (padding и margin), где * — число от 0 до 5.

Практическое применение

  • Дашборды: трёхколоночная или ассиметричная раскладка с адаптивными брейкпоинтами.
  • Карточки товаров: многоколонная сетка с равной шириной и плотной компоновкой (dense).
  • Формы и панели управления: одноколоночная раскладка для мобильных и двухколоночная для десктопов.

Использование комбинации v-container, v-row и v-col позволяет создавать интерфейсы любого уровня сложности с корректным отображением на всех устройствах.

Оглавление