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

Vuetify использует систему сеток, основанную на Flexbox, которая позволяет создавать адаптивные и гибкие интерфейсы. Вложенные сетки — это способ структурирования сложных компонентов, когда внутри одного ряда (v-row) размещается другой ряд или колонка (v-col). Такой подход обеспечивает высокий контроль над макетом и позволяет создавать сложные, но при этом отзывчивые интерфейсы.

Структура вложенной сетки

Базовая структура вложенной сетки в Vuetify выглядит следующим образом:

Ключевые моменты:

  • v-container служит оболочкой для всей сетки и добавляет внутренние отступы.
  • v-row создает горизонтальный ряд колонок.
  • v-col определяет ширину колонки в 12-колоночной системе.
  • Вложенные v-row и v-col могут находиться внутри любого v-col.

Управление размерами вложенных колонок

В Vuetify используется 12-колоночная сетка. При вложении важно помнить:

  • Ширина вложенных колонок относится к родительской колонке, а не ко всему ряду.
  • Можно использовать стандартные атрибуты cols, md, sm для адаптивности.

Пример:


  Родительская колонка
  
    Вложенная колонка 50%
    Вложенная колонка 50%

Здесь каждая вложенная колонка занимает половину ширины родителя, который сам может занимать 8 из 12 колонок всего ряда.

Применение отступов и выравнивания

Vuetify предоставляет гибкие инструменты для управления расстоянием между элементами:

  • dense — уменьшает вертикальные и горизонтальные отступы внутри ряда.
  • no-gutters — убирает промежутки между колонками.
  • justify и align — управляют горизонтальным и вертикальным выравниванием соответственно.

Пример вложенной сетки с выравниванием:


  
    Левый блок
    
      Вложенный 1
      Вложенный 2
    
  
  Правый блок
  • Атрибут justify="space-between" распределяет колонки по всей ширине ряда.
  • Атрибут align="center" выравнивает их по вертикали.
  • Вложенный ряд использует dense, чтобы уменьшить промежутки.

Адаптивность вложенных сеток

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

  • xs — для экранов <600px
  • sm — 600–960px
  • md — 960–1264px
  • lg — 1264–1904px
  • xl — >1904px

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


  Родитель
  
    Вложенная колонка A
    Вложенная колонка B

На маленьких экранах (xs) вложенные колонки займут всю ширину родителя, а на экранах sm и выше — по половине ширины.

Вложенные сетки и динамическое содержимое

Когда контент динамический (например, данные из API), важно учитывать, что высота родительской колонки автоматически подстраивается под высоту вложенных элементов, если не задан фиксированный размер. Для контроля высоты можно использовать:

  • class="fill-height" — заставляет колонку занимать всю доступную высоту родителя.
  • style="min-height: 200px" — задает минимальную высоту для визуальной стабильности.

Пример:


  Динамический контент
  
    
      {{ item.name }}

Ограничения и особенности

  • Вложенные сетки не могут использоваться вне v-col, иначе поведение Flexbox будет непредсказуемым.
  • Не рекомендуется слишком глубоко вкладывать ряды (более 3 уровней), чтобы избежать избыточного усложнения структуры.
  • Вложенные колонки наследуют отступы и выравнивание родителя, но можно переопределить их локально через дополнительные атрибуты.

Практический пример сложного макета


  
    
      Основная колонка
      
        
          Верхний левый блок
          
            Вложенный левый
            Вложенный правый
          
        
        Верхний правый блок
      
    
    
      Боковая панель
      
        Виджет 1
        Виджет 2

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

Оглавление