CRow

Flex-контейнер, образующий строку в 12-колоночной сетке. Используется вместе с CCol для построения адаптивных раскладок.

Выравнивание

Вертикальное выравнивание колонок задаётся через align, горизонтальное распределение — через justify.

align="start" · justify="start"

60px

90px

50px

align="center" · justify="center"

60px

90px

50px

align="end" · justify="space-between"

60px

90px

50px

Показать код

<template>
  <!-- align="start" · justify="start" -->
  <c-row align="start" justify="start">
    <c-col cols="2"><div style="height:60px">…</div></c-col>
    <c-col cols="2"><div style="height:90px">…</div></c-col>
    <c-col cols="2"><div style="height:50px">…</div></c-col>
  </c-row>

  <!-- align="center" · justify="center" -->
  <c-row align="center" justify="center"> … </c-row>

  <!-- align="end" · justify="space-between" -->
  <c-row align="end" justify="space-between"> … </c-row>
</template>

Пример dashboard-раскладки

Полноценный адаптивный лэйаут через CRow + CCol: карточки статистики, график и сайдбар.

$24.8k

Revenue

↑ 12%

1 204

Orders

↑ 8%

8 391

Users

↑ 3%

37

Returns

↓ 2%

RevenueLast 7 days

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Top Products

Headphones

68%

Smart Watch

49%

Camera

34%

Speaker

21%

Показать код

<template>
  <!-- Статистика: 2 колонки на мобилке, 4 на md+ -->
  <c-row class="mb-4">
    <c-col v-for="stat in stats" :key="stat.label" cols="6" md="3">
      <c-card>…</c-card>
    </c-col>
  </c-row>

  <!-- График + сайдбар: полная ширина на мобилке, 8/4 на md+ -->
  <c-row>
    <c-col cols="12" md="8">
      <c-card>…график…</c-card>
    </c-col>
    <c-col cols="12" md="4">
      <c-card>…топ продуктов…</c-card>
    </c-col>
  </c-row>
</template>

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

Для каждого пропа выравнивания есть адаптивный вариант, который переопределяет базовое значение начиная с указанного брейкпоинта (mobile-first):

<template>
  <c-row align="start" :align-md="'center'" :justify-lg="'space-between'">
    <c-col cols="12" md="6">A</c-col>
    <c-col cols="12" md="6">B</c-col>
  </c-row>
</template>

Без отступов

Убрать стандартный gap между колонками можно через no-gutter:

<template>
  <c-row no-gutter>
    <c-col cols="6">A</c-col>
    <c-col cols="6">B</c-col>
  </c-row>
</template>

Props

Проп

Тип

По умолчанию

Описание

align

'start' | 'center' | 'end' | 'baseline' | 'stretch'

null

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

align-content

'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'stretch'

null

Выравнивание переносов строк (align-content)

justify

'start' | 'center' | 'end' | 'space-between' | 'space-around'

null

Горизонтальное распределение колонок (justify-content)

no-gutter

boolean

false

Убирает gap между колонками

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

Для каждого брейкпоинта (xs, sm, md, lg, xl, xxl) доступны следующие пропы:

Проп

Тип

Описание

align-xs … align-xxl

как у align

Переопределяет align начиная с этого брейкпоинта

align-content-xs … align-content-xxl

как у align-content

Переопределяет align-content начиная с этого брейкпоинта

justify-xs … justify-xxl

как у justify

Переопределяет justify начиная с этого брейкпоинта

Значения брейкпоинтов по умолчанию: xs ≥ 0 px · sm ≥ 600 px · md ≥ 960 px · lg ≥ 1280 px · xl ≥ 1920 px · xxl ≥ 2560 px.

Кастомные имена брейкпоинтов, настроенные через @vueland/utils-jit, не становятся новыми пропами выравнивания. Для них используйте сгенерированные utility-классы, например class="tablet:justify-center tablet:items-center".

CSS-переменные

CRow не определяет собственных CSS-переменных. Отступы сетки генерируются из SCSS-карты брейкпоинтов и могут быть изменены через настройку брейкпоинтов @vueland/utils-jit.

Слоты

Слот

Описание

default

Компоненты колонок (CCol) или любой другой контент

См. также

• CCol — компонент колонки
• CSpacer — flex-распорка
• Брейкпоинты — значения брейкпоинтов и настройка