Компонент v-col

Компонент v-col в Vuetify используется для построения адаптивной сетки и является частью системы v-row / v-container. Он предназначен для управления шириной колонок, их порядком и поведением на различных разрешениях экрана. Основная идея заключается в гибком распределении пространства в пределах строки.

Базовый синтаксис:

<v-row>
  <v-col cols="12" sm="6" md="4">
    Контент колонки
  </v-col>
</v-row>

Здесь:

  • cols="12" — ширина колонки на маленьких экранах (мобильные устройства), занимает всю ширину строки.
  • sm="6" — на экранах sm (≥600px) колонка занимает половину строки.
  • md="4" — на экранах md (≥960px) колонка занимает треть строки.

Параметры ширины

v-col поддерживает несколько способов задания ширины:

  1. По количеству колонок (cols) Значение от 1 до 12. Определяет, сколько частей из 12 займет колонка.

    <v-col cols="3">Колонка 3/12</v-col>

  2. Адаптивные пропорции (sm, md, lg, xl) Позволяют задавать разные размеры для разных брейкпоинтов.

    <v-col sm="6" md="3" lg="2">Адаптивная колонка</v-col>

  3. Автоматическое выравнивание (auto) Колонка принимает ширину по содержимому.

    <v-col cols="auto">Ширина по контенту</v-col>

Выравнивание колонок

v-col поддерживает вертикальное и горизонтальное выравнивание в пределах строки. Для этого используется комбинация с v-row и утилитами выравнивания:

<v-row align="center" justify="space-between">
  <v-col cols="4">Левый блок</v-col>
  <v-col cols="4">Центр</v-col>
  <v-col cols="4">Правый блок</v-col>
</v-row>
  • align — вертикальное выравнивание (start, center, end, stretch).
  • justify — горизонтальное распределение (start, center, end, space-between, space-around, space-evenly).

Порядок колонок

Параметр order управляет порядком отображения колонок независимо от их положения в коде. Может быть задан как числом, так и адаптивно:

<v-row>
  <v-col cols="4" order="2">Вторая колонка</v-col>
  <v-col cols="4" order="1">Первая колонка</v-col>
</v-row>

Адаптивная настройка:

<v-col sm="6" order-sm="1" order-md="2">Адаптивный порядок</v-col>

Отступы и интервалы

Компонент v-col использует систему gutter через свойства строки (v-row). Дополнительно можно управлять внешними и внутренними отступами через классы утилит:

  • pa-2 — внутренние паддинги
  • ma-3 — внешние отступы
  • px-4 — горизонтальные паддинги
  • py-1 — вертикальные паддинги

Пример:

<v-row>
  <v-col cols="6" class="pa-4">Контент с паддингом</v-col>
</v-row>

Автоматическое выравнивание и вложенные сетки

v-col поддерживает вложенные строки для построения сложной сетки:

<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>

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

Адаптивное скрытие и отображение

Для управления видимостью на разных устройствах используются классы d-{breakpoint}-{display}:

<v-col cols="12" class="d-none d-md-flex">
  Видно только на md и выше
</v-col>
  • d-none — скрыть
  • d-flex, d-block, d-inline-block — показать с нужным типом отображения

Итоговая структура и рекомендации

  • Использовать v-col только внутри v-row.
  • Комбинировать cols, адаптивные брейкпоинты и order для гибкого управления макетом.
  • Применять утилиты Vuetify для паддингов, маргинов и видимости.
  • Для сложных макетов применять вложенные строки внутри колонок.

Эта комбинация возможностей делает v-col мощным инструментом для построения полностью адаптивных интерфейсов в Vuetify.

Оглавление