The grid lays out the content inside a page. Build the frame of the application — the header, the drawers and the footer — from CdsLayout.

Anatomy

Every layout starts with CdsGrid — the container can sit at any nesting level as long as it takes the full width of its parent. Inside a Flexbox grid the CdsCol columns are grouped into CdsRow rows; in CSS Grid mode the rows are not needed — the columns wrap on their own.

Storybook

Variations

Flexbox or CSS Grid

By default the grid is built on Flexbox. The second mode — CSS Grid — is turned on once for the whole application by the cssGrid option and adds capabilities Flexbox does not have: nested subgrid grids and explicit positioning of the columns through span, start and end. In exchange, the Flexbox mode can change the order of the columns through order.

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

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

The components and the props are the same in both modes, only the generated markup differs. In the examples below the CSS Grid mode is turned on locally — through provide(CssGridSymbol, true); in an application the cssGrid option is enough.

Columns and breakpoints

The width of a column is set by the xs–xl breakpoint props: the number says how many grid columns CdsCol takes starting from that breakpoint. The values work "bottom-up": md="4" applies to md and wider.

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>

The number of columns in the grid depends on the width of the screen, so the same number takes a different share of the row on different breakpoints:

Breakpoint	Screen width	Columns in the grid
xs	≥ 320px	4
sm	≥ 672px	8
md	≥ 1056px	16
lg	≥ 1312px	16
xl	≥ 1584px	16

Combine the breakpoints to describe the behavior of the layout on every screen: here each column takes half of the row on a phone and a quarter starting from a tablet. The value 0 hides the column on a breakpoint.

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>

Automatic columns

A CdsCol without breakpoint props splits the row evenly with its neighbors: one column takes the whole width, four take a quarter each. Handy when the shares are equal and there is no point in recalculating them per breakpoint. Works in Flexbox mode only.

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>

Grid modes

The narrow and condensed props shrink the gap between the columns from 32px to 16px and 1px respectively. CdsRow has the same props — that is how the modes are mixed inside one grid. The wide prop removes the maximum width limit (1584px) and stretches the grid across the whole container.

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>

Offset and order

Instead of a number, a breakpoint prop can take an object. The span key sets the width, offset shifts the column to the right by the given number of columns.

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>

The order key changes the visual order of the columns without touching the markup — to show the columns on a desktop in a different sequence than in the DOM, for example. Works in Flexbox mode only.

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 mode

In CSS Grid mode the columns go straight into CdsGrid — without CdsRow: the grid wraps them onto a new line itself when the row is full.

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>

A nested grid with the subgrid prop inherits the columns of its parent: put it inside a CdsCol and its columns line up exactly with the lines of the outer grid. The narrow and condensed modes of a nested grid work independently from the root one.

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>

A column can be positioned explicitly: in a breakpoint object start and end set the starting and the ending grid line, and the span prop fixes the range for all breakpoints at once — as a number or as a share: '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 classes

The whole grid is duplicated with utility classes — lay a layout out without Vue components: in emails, on static pages or inside somebody else's code. The components generate the same classes, so both ways mix freely.

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>

Classes of the Flexbox grid:

Class	Purpose
cds-grid	Grid container
cds-grid-narrow / cds-grid-condensed	Narrow (16px) and condensed (1px) gap
cds-grid--wide	No maximum width limit
cds-row	Row; cds-row-narrow, cds-row-condensed — modes
cds-col-{bp}-{n}	Column n wide on the bp breakpoint and wider
cds-col-{bp} / cds-col-{bp}-auto	Automatic column / width by content
cds-offset-{bp}-{n}	Shift to the right by n columns
cds-order-{bp}-{n}	Visual order of the column
cds-row-padding / cds-col-padding	Vertical paddings equal to half of the gutter
cds-aspect-ratio cds-aspect-ratio--{w}x{h}	Aspect ratio of a block: 16x9, 4x3, 1x1, …

Classes of the CSS Grid mode:

Class	Purpose
cds--css-grid	Container; --narrow, --condensed, --wide
cds--css-grid-column	Column
cds--col-span-{n}	Range of n columns on all breakpoints
cds--{bp}:col-span-{n}	Range starting from the bp breakpoint
cds--col-span-{25|50|75|100}	Range as a share of the grid
cds--col-start-{n} / cds--col-end-{n}	Starting and ending line
cds--subgrid	Nested grid; modes — --narrow and so on

The cds-no-gutter and cds-no-gutter--start / cds-no-gutter--end classes remove the paddings of the columns — for the whole row or on one side. Their counterparts cds-hang--start / cds-hang--end give the padding back to the content when it has to be aligned to the modular grid.

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>

Guidelines

Storybook

Scenarios

Card tiles

A showcase of reports: on a phone the cards go in a column, on a tablet two per row, on a wide screen four in a row. The cds-row-padding class gives the vertical gap between the rows of the tiles.

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>

Two-column form

The grid lays out the fields of a form: the paired fields (sm="4" md="8") split the row in half starting from a tablet, while the comment and the buttons take the whole row. On a phone everything folds into a single column with no extra conditions. The vertical rhythm comes from the py-1 utility classes on the columns — tighter than cds-row-padding — and hide-details on the controls removes the reserved area for messages.

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>

List with filters

The classic "filters on the left, results on the right" proportion: the panel takes 4 columns, the list takes 12. On a phone and a tablet the filters stand above the list — that is what the full-width xs and sm values are for.

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

Props

Name	Type	Default	Description
condensed	boolean | undefined	—	Condensed grid. The gap is reduced to 1px on both sides
narrow	boolean | undefined	—	Narrow grid
subgrid	boolean | undefined	—	Only CSS Grid supported. A nested grid
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
wide	boolean | undefined	—	Removes the default max-width and stretches the grid across the whole width of the container

Slots

Name	Type	Description
default	any	Rows of the grid — CdsRow

CdsRow

Props

Name	Type	Default	Description
condensed	boolean | undefined	—	Condensed grid. The gap is reduced to 1px on both sides
narrow	boolean | undefined	—	Narrow grid
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render

Slots

Name	Type	Description
default	any	Columns of the row — CdsCol

CdsCol

Props

Name	Type	Default	Description
lg	ColumnBreakpoint<ColumnGridBreakpoint | ColumnFlexBreakpoint>	—	>1312px
md	ColumnBreakpoint<ColumnGridBreakpoint | ColumnFlexBreakpoint>	—	>1056px
sm	ColumnBreakpoint<ColumnGridBreakpoint | ColumnFlexBreakpoint>	—	>672px
span	string | number | ColumnSpanType | undefined	—	Only CSS Grid supported. A permanent column range, start or end values that never change.
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
xl	ColumnBreakpoint<ColumnGridBreakpoint | ColumnFlexBreakpoint>	—	>1584px
xs	ColumnBreakpoint<ColumnGridBreakpoint | ColumnFlexBreakpoint>	—	>320px

Slots

Name	Type	Description
default	any	Content of the column