Сетка размечает контент внутри страницы. Каркас приложения — шапку, панели и подвал — собирайте из CdsLayout.

Анатомия

Каждый макет начинается с CdsGrid — контейнер можно ставить на любом уровне вложенности, если он занимает всю ширину родителя. Внутри Flexbox-сетки колонки CdsCol группируются в ряды CdsRow; в режиме CSS Grid ряды не нужны — колонки переносятся сами.

Storybook

Вариации

Flexbox или CSS Grid

По умолчанию сетка построена на Flexbox. Второй режим — CSS Grid — включается один раз на всё приложение опцией cssGrid и добавляет возможности, которых у Flexbox нет: вложенные сетки subgrid и явное позиционирование колонок через span, start и end. Flexbox-режим взамен умеет менять порядок колонок через order.

import { createCds } from '@central-design-system/components';

const cds = createCds({ cssGrid: true });

Компоненты и пропсы в обоих режимах одни и те же, различается сгенерированная разметка. В примерах ниже режим CSS Grid включён точечно — через provide(CssGridSymbol, true); в приложении достаточно опции cssGrid.

Колонки и брейкпоинты

Ширина колонки задаётся пропсами-брейкпоинтами xs–xl: число — сколько колонок сетки займёт CdsCol, начиная с этого брейкпоинта. Значения работают «снизу вверх»: md="4" действует на md и шире.

Sandbox Storybook

<script setup lang="ts">
import { CdsCol, CdsGrid, CdsRow } from '@central-design-system/components';
</script>

<template>
  <CdsGrid class="grid-demo">
    <CdsRow>
      <CdsCol :md="4"><div class="cell">md: 4</div></CdsCol>
      <CdsCol :md="4"><div class="cell">md: 4</div></CdsCol>
      <CdsCol :md="4"><div class="cell">md: 4</div></CdsCol>
      <CdsCol :md="4"><div class="cell">md: 4</div></CdsCol>
    </CdsRow>
  </CdsGrid>
</template>

<style scoped>
.grid-demo {
  background-color: var(--cds-color-status-progress-fill);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 12px;
  color: var(--cds-color-content-secondary);
  background-color: var(--cds-color-surface-primary);
  box-shadow: 0 0 0 1px var(--cds-color-status-progress-line);
}
</style>

Количество колонок в сетке зависит от ширины экрана, поэтому одно и то же число на разных брейкпоинтах занимает разную долю ряда:

Брейкпоинт	Ширина экрана	Колонок в сетке
xs	≥ 320px	4
sm	≥ 672px	8
md	≥ 1056px	16
lg	≥ 1312px	16
xl	≥ 1584px	16

Комбинируйте брейкпоинты, чтобы описать поведение макета на всех экранах: здесь каждая колонка занимает половину ряда на телефоне и четверть — начиная с планшета. Значение 0 скрывает колонку на брейкпоинте.

Sandbox Storybook

<script setup lang="ts">
import { CdsCol, CdsGrid, CdsRow } from '@central-design-system/components';
</script>

<template>
  <CdsGrid class="grid-demo">
    <CdsRow>
      <CdsCol :xs="2" :sm="2" :md="4"><div class="cell">xs: 2 · sm: 2 · md: 4</div></CdsCol>
      <CdsCol :xs="2" :sm="2" :md="4"><div class="cell">xs: 2 · sm: 2 · md: 4</div></CdsCol>
      <CdsCol :xs="2" :sm="2" :md="4"><div class="cell">xs: 2 · sm: 2 · md: 4</div></CdsCol>
      <CdsCol :xs="2" :sm="2" :md="4"><div class="cell">xs: 2 · sm: 2 · md: 4</div></CdsCol>
    </CdsRow>
  </CdsGrid>
</template>

<style scoped>
.grid-demo {
  background-color: var(--cds-color-status-progress-fill);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 12px;
  color: var(--cds-color-content-secondary);
  background-color: var(--cds-color-surface-primary);
  box-shadow: 0 0 0 1px var(--cds-color-status-progress-line);
}
</style>

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

CdsCol без пропсов-брейкпоинтов делит ряд поровну между соседями: одна колонка займёт всю ширину, четыре — по четверти. Удобно, когда доли равные и пересчитывать их по брейкпоинтам незачем. Работает только в Flexbox-режиме.

Sandbox Storybook

<script setup lang="ts">
import { CdsCol, CdsGrid, CdsRow } from '@central-design-system/components';
</script>

<template>
  <CdsGrid class="grid-demo">
    <CdsRow class="cds-row-padding">
      <CdsCol><div class="cell">1 из 1</div></CdsCol>
    </CdsRow>
    <CdsRow class="cds-row-padding">
      <CdsCol><div class="cell">1 из 2</div></CdsCol>
      <CdsCol><div class="cell">2 из 2</div></CdsCol>
    </CdsRow>
    <CdsRow class="cds-row-padding">
      <CdsCol><div class="cell">1 из 4</div></CdsCol>
      <CdsCol><div class="cell">2 из 4</div></CdsCol>
      <CdsCol><div class="cell">3 из 4</div></CdsCol>
      <CdsCol><div class="cell">4 из 4</div></CdsCol>
    </CdsRow>
  </CdsGrid>
</template>

<style scoped>
.grid-demo {
  background-color: var(--cds-color-status-progress-fill);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 12px;
  color: var(--cds-color-content-secondary);
  background-color: var(--cds-color-surface-primary);
  box-shadow: 0 0 0 1px var(--cds-color-status-progress-line);
}
</style>

Виды сетки

Свойства narrow и condensed сжимают отступ между колонками с 32px до 16px и 1px соответственно. Те же пропсы есть у CdsRow — так виды смешиваются в одной сетке. Свойство wide снимает ограничение максимальной ширины (1584px) и растягивает сетку на весь контейнер.

Sandbox Storybook

<script setup lang="ts">
import { CdsCol, CdsGrid, CdsRow } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-col gap-3">
    <div>
      <p class="caption">По умолчанию — отступ между колонками 32px</p>
      <CdsGrid class="grid-wide">
        <CdsRow>
          <CdsCol :md="4"><div class="cell" /></CdsCol>
          <CdsCol :md="4"><div class="cell" /></CdsCol>
          <CdsCol :md="4"><div class="cell" /></CdsCol>
          <CdsCol :md="4"><div class="cell" /></CdsCol>
        </CdsRow>
      </CdsGrid>
    </div>
    <div>
      <p class="caption">narrow — отступ 16px</p>
      <CdsGrid narrow class="grid-narrow">
        <CdsRow>
          <CdsCol :md="4"><div class="cell" /></CdsCol>
          <CdsCol :md="4"><div class="cell" /></CdsCol>
          <CdsCol :md="4"><div class="cell" /></CdsCol>
          <CdsCol :md="4"><div class="cell" /></CdsCol>
        </CdsRow>
      </CdsGrid>
    </div>
    <div>
      <p class="caption">condensed — отступ 1px</p>
      <CdsGrid condensed class="grid-condensed">
        <CdsRow>
          <CdsCol :md="4"><div class="cell" /></CdsCol>
          <CdsCol :md="4"><div class="cell" /></CdsCol>
          <CdsCol :md="4"><div class="cell" /></CdsCol>
          <CdsCol :md="4"><div class="cell" /></CdsCol>
        </CdsRow>
      </CdsGrid>
    </div>
  </div>
</template>

<style scoped>
.caption {
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--cds-color-content-secondary);
}

/* Фон сетки подсвечивает отступы; у каждого вида — свой цвет, как в гайдах CDS 3 */
.grid-wide {
  background-color: var(--cds-color-status-progress-fill);
}

.grid-narrow {
  background-color: var(--cds-color-other-teal-fill);
}

.grid-condensed {
  background-color: var(--cds-color-other-purple-fill);
}

.cell {
  min-height: 48px;
  background-color: var(--cds-color-surface-primary);
}

.grid-wide .cell {
  box-shadow: 0 0 0 1px var(--cds-color-status-progress-line);
}

.grid-narrow .cell {
  box-shadow: 0 0 0 1px var(--cds-color-other-teal-line);
}

.grid-condensed .cell {
  box-shadow: 0 0 0 1px var(--cds-color-other-purple-line);
}
</style>

Смещение и порядок

Вместо числа в проп-брейкпоинт можно передать объект. Ключ span задаёт ширину, offset — сдвиг вправо на заданное число колонок.

Sandbox Storybook

<script setup lang="ts">
import { CdsCol, CdsGrid, CdsRow } from '@central-design-system/components';
</script>

<template>
  <CdsGrid class="grid-demo">
    <CdsRow class="cds-row-padding">
      <CdsCol :md="{ span: 4, offset: 12 }"><div class="cell">offset: 12</div></CdsCol>
    </CdsRow>
    <CdsRow class="cds-row-padding">
      <CdsCol :md="{ span: 8, offset: 8 }"><div class="cell">offset: 8</div></CdsCol>
    </CdsRow>
    <CdsRow class="cds-row-padding">
      <CdsCol :md="{ span: 12, offset: 4 }"><div class="cell">offset: 4</div></CdsCol>
    </CdsRow>
    <CdsRow class="cds-row-padding">
      <CdsCol :md="16"><div class="cell">offset: 0</div></CdsCol>
    </CdsRow>
  </CdsGrid>
</template>

<style scoped>
.grid-demo {
  background-color: var(--cds-color-status-progress-fill);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 12px;
  color: var(--cds-color-content-secondary);
  background-color: var(--cds-color-surface-primary);
  box-shadow: 0 0 0 1px var(--cds-color-status-progress-line);
}
</style>

Ключ order меняет визуальный порядок колонок, не трогая разметку — например, чтобы на десктопе показать колонки в другой последовательности, чем в DOM. Работает только в Flexbox-режиме.

Sandbox Storybook

<script setup lang="ts">
import { CdsCol, CdsGrid, CdsRow } from '@central-design-system/components';
</script>

<template>
  <CdsGrid class="grid-demo">
    <CdsRow>
      <CdsCol :md="{ span: 8, order: 3 }"><div class="cell">1-я в разметке · order: 3</div></CdsCol>
      <CdsCol :md="{ span: 4, order: 1 }"><div class="cell">2-я · order: 1</div></CdsCol>
      <CdsCol :md="{ span: 4, order: 2 }"><div class="cell">3-я · order: 2</div></CdsCol>
    </CdsRow>
  </CdsGrid>
</template>

<style scoped>
.grid-demo {
  background-color: var(--cds-color-status-progress-fill);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 12px;
  color: var(--cds-color-content-secondary);
  background-color: var(--cds-color-surface-primary);
  box-shadow: 0 0 0 1px var(--cds-color-status-progress-line);
}
</style>

Режим CSS Grid

В режиме CSS Grid колонки кладутся прямо в CdsGrid — без CdsRow: сетка сама переносит их на новую строку, когда ряд заполнен.

Sandbox Storybook

<script setup lang="ts">
import { CdsCol, CdsGrid, CssGridSymbol } from '@central-design-system/components';
import { provide } from 'vue';

// В приложении режим включается один раз: createCds({ cssGrid: true })
provide(CssGridSymbol, true);
</script>

<template>
  <CdsGrid class="grid-demo">
    <CdsCol :xs="2" :md="4"><div class="cell">xs: 2 · md: 4</div></CdsCol>
    <CdsCol :xs="2" :md="4"><div class="cell">xs: 2 · md: 4</div></CdsCol>
    <CdsCol :xs="2" :md="4"><div class="cell">xs: 2 · md: 4</div></CdsCol>
    <CdsCol :xs="2" :md="4"><div class="cell">xs: 2 · md: 4</div></CdsCol>
  </CdsGrid>
</template>

<style scoped>
.grid-demo {
  background-color: var(--cds-color-status-progress-fill);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 12px;
  color: var(--cds-color-content-secondary);
  background-color: var(--cds-color-surface-primary);
  box-shadow: 0 0 0 1px var(--cds-color-status-progress-line);
}
</style>

Вложенная сетка с пропом subgrid наследует колонки родительской: положите её внутрь CdsCol — и её колонки встанут точно по линиям внешней сетки. Виды narrow и condensed у вложенной сетки работают независимо от корневой.

Sandbox Storybook

<script setup lang="ts">
import { CdsCol, CdsGrid, CssGridSymbol } from '@central-design-system/components';
import { provide } from 'vue';

// В приложении режим включается один раз: createCds({ cssGrid: true })
provide(CssGridSymbol, true);
</script>

<template>
  <CdsGrid class="grid-demo">
    <CdsCol :md="4"><div class="cell">md: 4</div></CdsCol>
    <CdsCol :md="12">
      <CdsGrid subgrid class="subgrid-demo">
        <CdsCol :md="4"><div class="cell cell--nested">md: 4</div></CdsCol>
        <CdsCol :md="4"><div class="cell cell--nested">md: 4</div></CdsCol>
        <CdsCol :md="4"><div class="cell cell--nested">md: 4</div></CdsCol>
      </CdsGrid>
    </CdsCol>
  </CdsGrid>
</template>

<style scoped>
/* Фон подсвечивает отступы; у вложенной сетки — свой цвет, чтобы видеть её границы */
.grid-demo {
  background-color: var(--cds-color-status-progress-fill);
}

.subgrid-demo {
  background-color: var(--cds-color-other-purple-fill);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 12px;
  color: var(--cds-color-content-secondary);
  background-color: var(--cds-color-surface-primary);
  box-shadow: 0 0 0 1px var(--cds-color-status-progress-line);
}

.cell--nested {
  box-shadow: 0 0 0 1px var(--cds-color-other-purple-line);
}
</style>

Колонку можно позиционировать явно: в объекте брейкпоинта start и end задают начальную и конечную линию сетки, а проп span фиксирует диапазон сразу для всех брейкпоинтов — числом или долей '25%', '50%', '75%', '100%'.

Sandbox Storybook

<script setup lang="ts">
import { CdsCol, CdsGrid, CssGridSymbol } from '@central-design-system/components';
import { provide } from 'vue';

// В приложении режим включается один раз: createCds({ cssGrid: true })
provide(CssGridSymbol, true);
</script>

<template>
  <CdsGrid class="grid-demo">
    <CdsCol :span="8"><div class="cell">span: 8 — на любом брейкпоинте</div></CdsCol>
    <CdsCol :md="{ start: 5, span: 8 }"><div class="cell">start: 5 · span: 8</div></CdsCol>
    <CdsCol :md="{ start: 9, end: 17 }"><div class="cell">start: 9 · end: 17</div></CdsCol>
    <CdsCol md="50%"><div class="cell">md: 50%</div></CdsCol>
  </CdsGrid>
</template>

<style scoped>
.grid-demo {
  background-color: var(--cds-color-status-progress-fill);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 12px;
  color: var(--cds-color-content-secondary);
  background-color: var(--cds-color-surface-primary);
  box-shadow: 0 0 0 1px var(--cds-color-status-progress-line);
}
</style>

CSS-классы

Вся сетка продублирована утилитарными классами — размечайте макет без Vue-компонентов: в письмах, на статических страницах или в чужом коде. Компоненты генерируют те же классы, поэтому оба способа свободно смешиваются.

Sandbox Storybook

<template>
  <div class="cds-grid grid-demo">
    <div class="cds-row">
      <div class="cds-col-xs-2 cds-col-md-4"><div class="cell">cds-col-md-4</div></div>
      <div class="cds-col-xs-2 cds-col-md-4"><div class="cell">cds-col-md-4</div></div>
      <div class="cds-col-xs-2 cds-col-md-8"><div class="cell">cds-col-md-8</div></div>
    </div>
  </div>
</template>

<style scoped>
.grid-demo {
  background-color: var(--cds-color-status-progress-fill);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 12px;
  color: var(--cds-color-content-secondary);
  background-color: var(--cds-color-surface-primary);
  box-shadow: 0 0 0 1px var(--cds-color-status-progress-line);
}
</style>

Классы Flexbox-сетки:

Класс	Назначение
cds-grid	Контейнер сетки
cds-grid-narrow / cds-grid-condensed	Узкий (16px) и конденсированный (1px) отступ
cds-grid--wide	Без ограничения максимальной ширины
cds-row	Ряд; cds-row-narrow, cds-row-condensed — виды
cds-col-{bp}-{n}	Колонка шириной n на брейкпоинте bp и шире
cds-col-{bp} / cds-col-{bp}-auto	Автоматическая колонка / ширина по контенту
cds-offset-{bp}-{n}	Сдвиг вправо на n колонок
cds-order-{bp}-{n}	Визуальный порядок колонки
cds-row-padding / cds-col-padding	Вертикальные отступы, равные половине межколонника
cds-aspect-ratio cds-aspect-ratio--{w}x{h}	Соотношение сторон блока: 16x9, 4x3, 1x1, …

Классы режима CSS Grid:

Класс	Назначение
cds--css-grid	Контейнер; --narrow, --condensed, --wide
cds--css-grid-column	Колонка
cds--col-span-{n}	Диапазон в n колонок на всех брейкпоинтах
cds--{bp}:col-span-{n}	Диапазон с брейкпоинта bp
cds--col-span-{25|50|75|100}	Диапазон долей сетки
cds--col-start-{n} / cds--col-end-{n}	Начальная и конечная линия
cds--subgrid	Вложенная сетка; виды — --narrow и т. д.

Классы cds-no-gutter и cds-no-gutter--start / cds-no-gutter--end убирают отступы колонок — у всего ряда или с одной стороны. Парные cds-hang--start / cds-hang--end возвращают отступ контенту, когда его нужно выровнять по модульной сетке.

Sandbox Storybook

<script setup lang="ts">
import { CdsCol, CdsGrid, CdsRow } from '@central-design-system/components';
</script>

<template>
  <CdsGrid class="grid-demo">
    <CdsRow class="cds-row-padding">
      <CdsCol :md="8"><div class="cell">с отступами</div></CdsCol>
      <CdsCol :md="8"><div class="cell">с отступами</div></CdsCol>
    </CdsRow>
    <CdsRow class="cds-no-gutter cds-row-padding">
      <CdsCol :md="8"><div class="cell">cds-no-gutter</div></CdsCol>
      <CdsCol :md="8"><div class="cell">cds-no-gutter</div></CdsCol>
    </CdsRow>
    <CdsRow class="cds-no-gutter--start cds-row-padding">
      <CdsCol :md="8"><div class="cell">cds-no-gutter--start</div></CdsCol>
      <CdsCol :md="8"><div class="cell">cds-no-gutter--start</div></CdsCol>
    </CdsRow>
  </CdsGrid>
</template>

<style scoped>
.grid-demo {
  background-color: var(--cds-color-status-progress-fill);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 12px;
  color: var(--cds-color-content-secondary);
  background-color: var(--cds-color-surface-primary);
  box-shadow: 0 0 0 1px var(--cds-color-status-progress-line);
}
</style>

Рекомендации

Storybook

Сценарии использования

Плитка карточек

Витрина отчётов: на телефоне карточки в столбик, на планшете — по две, на широком экране — четыре в ряд. Класс cds-row-padding даёт вертикальный отступ между рядами плитки.

Sandbox Storybook

<script setup lang="ts">
import { CdsCard, CdsCol, CdsGrid, CdsRow } from '@central-design-system/components';

const reports = [
  { title: 'Продажи', text: 'Выручка и динамика по месяцам' },
  { title: 'Склад', text: 'Остатки и оборачиваемость' },
  { title: 'Клиенты', text: 'Новые и повторные заказы' },
  { title: 'Финансы', text: 'Платежи и задолженность' }
];
</script>

<template>
  <CdsGrid>
    <CdsRow class="cds-row-padding">
      <CdsCol v-for="report in reports" :key="report.title" :xs="4" :sm="4" :md="8" :lg="4">
        <CdsCard :title="report.title" :text="report.text" height="100%" />
      </CdsCol>
    </CdsRow>
  </CdsGrid>
</template>

Форма в две колонки

Сетка раскладывает поля формы: парные поля (sm="4" md="8") делят ряд пополам начиная с планшета, комментарий и кнопки занимают ряд целиком. На телефоне всё складывается в одну колонку без дополнительных условий. Вертикальный ритм задают утилитарные классы py-1 на колонках — плотнее, чем cds-row-padding, а hide-details у контролов убирает зарезервированную зону сообщений.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsCol,
  CdsForm,
  CdsGrid,
  CdsRow,
  CdsSelect,
  CdsTextArea,
  CdsTextInput
} from '@central-design-system/components';
import { ref } from 'vue';

const name = ref('');
const surname = ref('');
const email = ref('');
const phone = ref('');
const company = ref('');
const city = ref<string>();
const comment = ref('');
</script>

<template>
  <CdsForm>
    <CdsGrid>
      <CdsRow>
        <CdsCol class="py-1" :sm="4" :md="8">
          <CdsTextInput v-model="name" label="Имя" placeholder="Иван" />
        </CdsCol>
        <CdsCol class="py-1" :sm="4" :md="8">
          <CdsTextInput v-model="surname" label="Фамилия" placeholder="Петров" />
        </CdsCol>
        <CdsCol class="py-1" :sm="4" :md="8">
          <CdsTextInput v-model="email" label="Рабочая почта" placeholder="ivan@company.ru" type="email" />
        </CdsCol>
        <CdsCol class="py-1" :sm="4" :md="8">
          <CdsTextInput v-model="phone" label="Телефон" placeholder="+7 912 345-67-89" type="tel" />
        </CdsCol>
        <CdsCol class="py-1" :sm="4" :md="8">
          <CdsTextInput v-model="company" label="Компания" placeholder="«Северный ветер»" />
        </CdsCol>
        <CdsCol class="py-1" :sm="4" :md="8">
          <CdsSelect
            v-model="city"
            label="Город"
            placeholder="Выберите город"
            :items="['Москва', 'Санкт-Петербург', 'Екатеринбург', 'Новосибирск']"
          />
        </CdsCol>
        <CdsCol class="py-1" :sm="8" :md="16">
          <CdsTextArea v-model="comment" label="Комментарий" placeholder="Чем мы можем помочь?" :rows="3" />
        </CdsCol>
        <CdsCol class="py-1" :sm="8" :md="16">
          <div class="flex gap-3">
            <CdsButton type="submit" text="Отправить заявку" />
            <CdsButton variant="soft" color="neutral" text="Очистить" />
          </div>
        </CdsCol>
      </CdsRow>
    </CdsGrid>
  </CdsForm>
</template>

Список с фильтрами

Классическая пропорция «фильтры слева, результаты справа»: панель занимает 4 колонки, список — 12. На телефоне и планшете фильтры встают над списком — за это отвечают значения xs и sm во всю ширину ряда.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsCard,
  CdsCheckbox,
  CdsCol,
  CdsGrid,
  CdsRow,
  CdsSelect,
  CdsTextInput
} from '@central-design-system/components';
import { computed, ref } from 'vue';

const documents = [
  { title: 'Договор поставки № 114', subtitle: 'Подписан · 12 июля', signed: true },
  { title: 'Акт сверки за июнь', subtitle: 'Черновик · 3 июля', signed: false },
  { title: 'Счёт № 2087', subtitle: 'Подписан · 28 июня', signed: true }
];

const query = ref('');
const onlySigned = ref(false);

const filtered = computed(() =>
  documents.filter(
    (document) =>
      document.title.toLowerCase().includes(query.value.toLowerCase()) && (!onlySigned.value || document.signed)
  )
);
</script>

<template>
  <CdsGrid>
    <CdsRow>
      <CdsCol :xs="4" :sm="8" :md="4">
        <div class="flex flex-col gap-2">
          <CdsTextInput v-model="query" label="Название" placeholder="Поиск по документам" />
          <CdsSelect label="Период" :items="['За месяц', 'За квартал', 'За год']" model-value="За месяц" />
          <CdsCheckbox v-model="onlySigned" label="Только подписанные" />
        </div>
      </CdsCol>
      <CdsCol :xs="4" :sm="8" :md="12">
        <div class="flex flex-col gap-2">
          <CdsCard
            v-for="document in filtered"
            :key="document.title"
            :title="document.title"
            :subtitle="document.subtitle"
          />
        </div>
      </CdsCol>
    </CdsRow>
  </CdsGrid>
</template>

API

CdsGrid

Пропсы

Имя	Тип	По умолчанию	Описание
condensed	boolean | undefined	—	Конденсированная сетка. Уменьшенный отступ до 1px по обеим сторонам
narrow	boolean | undefined	—	Узкая сетка
subgrid	boolean | undefined	—	Only CSS Grid supported. Вложенная сетка
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
wide	boolean | undefined	—	Удаляет max-width по умолчанию и растягивает сетку на всю ширину контейнера

Слоты

Имя	Тип	Описание
default	any	Ряды сетки — CdsRow

CdsRow

Пропсы

Имя	Тип	По умолчанию	Описание
condensed	boolean | undefined	—	Конденсированная сетка. Уменьшенный отступ до 1px по обеим сторонам
narrow	boolean | undefined	—	Узкая сетка
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения

Слоты

Имя	Тип	Описание
default	any	Колонки ряда — CdsCol

CdsCol

Пропсы

Имя	Тип	По умолчанию	Описание
lg	ColumnBreakpoint<ColumnGridBreakpoint | ColumnFlexBreakpoint>	—	>1312px
md	ColumnBreakpoint<ColumnGridBreakpoint | ColumnFlexBreakpoint>	—	>1056px
sm	ColumnBreakpoint<ColumnGridBreakpoint | ColumnFlexBreakpoint>	—	>672px
span	string | number | ColumnSpanType | undefined	—	Only CSS Grid supported. Постоянный диапазон колонок, start или end значения, которые не изменятся.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
xl	ColumnBreakpoint<ColumnGridBreakpoint | ColumnFlexBreakpoint>	—	>1584px
xs	ColumnBreakpoint<ColumnGridBreakpoint | ColumnFlexBreakpoint>	—	>320px

Слоты

Имя	Тип	Описание
default	any	Контент колонки