Grid система

Grid-система в Quasar представляет собой мощный инструмент для построения адаптивных интерфейсов. Она основана на 12-колоночной сетке, что позволяет легко управлять расположением элементов на экране в зависимости от ширины устройства. Ключевые компоненты для работы с сеткой — это <q-layout>, <q-page>, <q-page-container>, а для самой сетки — <q-row> и <q-col>.

<q-row> — контейнер для строк

<q-row> используется для создания горизонтальных строк, в которых располагаются колонки (<q-col>). Основные свойства:

  • align — вертикальное выравнивание (start, center, end, stretch).
  • justify — горизонтальное распределение (start, center, end, between, around, evenly).
  • no-gutters — удаление отступов между колонками.

Пример:

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

В этом примере три колонки равномерно распределены по строке с центровкой по вертикали.

<q-col> — управление колонками

<q-col> управляет шириной и порядком отображения контента. Основные свойства:

  • cols — количество колонок (1–12).
  • offset — смещение колонки вправо на указанное количество колонок.
  • order — порядок отображения колонок.
  • xs, sm, md, lg, xl — адаптивная ширина для разных размеров экранов.

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

<q-row>
  <q-col xs="12" sm="6" md="4">Контент 1</q-col>
  <q-col xs="12" sm="6" md="4">Контент 2</q-col>
  <q-col xs="12" sm="12" md="4">Контент 3</q-col>
</q-row>

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

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

Quasar позволяет легко управлять margin и padding через утилитарные классы:

  • q-mt-*, q-mb-*, q-ml-*, q-mr-* — внешние отступы (top, bottom, left, right).
  • q-pa-*, q-pt-*, q-pb-* — внутренние отступы (padding).
  • * заменяется числом от 0 до 24 (единицы Quasar).

Пример:

<q-col cols="6" class="q-mt-md q-pa-sm">
  Контент с отступами
</q-col>

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

Свойство cols может быть задано в процентах через :style или через специальные классы Quasar. Также можно комбинировать фиксированные и гибкие колонки, используя комбинацию cols и grow:

<q-row>
  <q-col cols="4">Фиксированная</q-col>
  <q-col grow>Гибкая</q-col>
</q-row>

Колонка с grow займет оставшееся пространство строки.

Скрытие и отображение колонок

Quasar предоставляет возможность управлять видимостью элементов в зависимости от размера экрана через классы:

  • hidden-xs-only — скрыть на мобильных.
  • hidden-sm-and-down — скрыть на планшетах и меньше.
  • hidden-md-and-up — скрыть на больших экранах.

Пример:

<q-col cols="6" class="hidden-sm-and-down">Только на десктопе</q-col>

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

Для сложных макетов можно вкладывать <q-row> внутрь <q-col>:

<q-row>
  <q-col cols="6">
    <q-row>
      <q-col cols="6">Вложенная 1</q-col>
      <q-col cols="6">Вложенная 2</q-col>
    </q-row>
  </q-col>
  <q-col cols="6">Колонка 2</q-col>
</q-row>

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

Итоговые принципы работы с Grid в Quasar

  • 12-колоночная сетка позволяет точно управлять шириной элементов.
  • Адаптивность достигается через xs, sm, md, lg, xl.
  • Отступы и видимость регулируются утилитарными классами.
  • Гибкие и вложенные колонки обеспечивают сложные макеты без дополнительных CSS.
  • Выравнивание и распределение элементов осуществляется через align и justify.

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

Оглавление