@central-design-system/skills 4.0.0-alpha.6

package/skills/cds-builder/references/components/cds-grid/examples.md

@@ -0,0 +1,687 @@
+# CdsGrid — usage examples
+
+> Extracted from Storybook stories (`docs/*.stories.ts`) by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md). `v-bind="args"` in templates refers to the props from the **Args** block of the corresponding example.
+
+A responsive modular grid: `CdsGrid`, `CdsRow` and `CdsCol` lay the content out in columns — from 4 on a phone to 16 on wide screens. The grid works in two modes — Flexbox (the default) and CSS Grid — and the whole markup is also available as ready-made CSS classes, without a single component.
+
+## 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.
+
+**Example (SFC):**
+
+```vue
+<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: rgb(var(--cds-color-status-progress-fill));
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  font-size: 12px;
+  color: rgb(var(--cds-color-content-secondary));
+  background-color: rgb(var(--cds-color-surface-primary));
+  box-shadow: 0 0 0 1px rgb(var(--cds-color-status-progress-line));
+}
+</style>
+```
+
+## Columns and breakpoints
+
+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.
+
+**Example (SFC):**
+
+```vue
+<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: rgb(var(--cds-color-status-progress-fill));
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  font-size: 12px;
+  color: rgb(var(--cds-color-content-secondary));
+  background-color: rgb(var(--cds-color-surface-primary));
+  box-shadow: 0 0 0 1px rgb(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.
+
+**Example (SFC):**
+
+```vue
+<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: rgb(var(--cds-color-status-progress-fill));
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  font-size: 12px;
+  color: rgb(var(--cds-color-content-secondary));
+  background-color: rgb(var(--cds-color-surface-primary));
+  box-shadow: 0 0 0 1px rgb(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.
+
+**Example (SFC):**
+
+```vue
+<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: rgb(var(--cds-color-content-secondary));
+}
+
+/* Фон сетки подсвечивает отступы; у каждого вида — свой цвет, как в гайдах CDS 3 */
+.grid-wide {
+  background-color: rgb(var(--cds-color-status-progress-fill));
+}
+
+.grid-narrow {
+  background-color: rgb(var(--cds-color-other-teal-fill));
+}
+
+.grid-condensed {
+  background-color: rgb(var(--cds-color-other-purple-fill));
+}
+
+.cell {
+  min-height: 48px;
+  background-color: rgb(var(--cds-color-surface-primary));
+}
+
+.grid-wide .cell {
+  box-shadow: 0 0 0 1px rgb(var(--cds-color-status-progress-line));
+}
+
+.grid-narrow .cell {
+  box-shadow: 0 0 0 1px rgb(var(--cds-color-other-teal-line));
+}
+
+.grid-condensed .cell {
+  box-shadow: 0 0 0 1px rgb(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.
+
+**Example (SFC):**
+
+```vue
+<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: rgb(var(--cds-color-status-progress-fill));
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  font-size: 12px;
+  color: rgb(var(--cds-color-content-secondary));
+  background-color: rgb(var(--cds-color-surface-primary));
+  box-shadow: 0 0 0 1px rgb(var(--cds-color-status-progress-line));
+}
+</style>
+```
+
+## Offset and order
+
+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.
+
+**Example (SFC):**
+
+```vue
+<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: rgb(var(--cds-color-status-progress-fill));
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  font-size: 12px;
+  color: rgb(var(--cds-color-content-secondary));
+  background-color: rgb(var(--cds-color-surface-primary));
+  box-shadow: 0 0 0 1px rgb(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.
+
+**Example (SFC):**
+
+```vue
+<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: rgb(var(--cds-color-status-progress-fill));
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  font-size: 12px;
+  color: rgb(var(--cds-color-content-secondary));
+  background-color: rgb(var(--cds-color-surface-primary));
+  box-shadow: 0 0 0 1px rgb(var(--cds-color-status-progress-line));
+}
+</style>
+```
+
+## CSS Grid mode
+
+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.
+
+**Example (SFC):**
+
+```vue
+<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: rgb(var(--cds-color-status-progress-fill));
+}
+
+.subgrid-demo {
+  background-color: rgb(var(--cds-color-other-purple-fill));
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  font-size: 12px;
+  color: rgb(var(--cds-color-content-secondary));
+  background-color: rgb(var(--cds-color-surface-primary));
+  box-shadow: 0 0 0 1px rgb(var(--cds-color-status-progress-line));
+}
+
+.cell--nested {
+  box-shadow: 0 0 0 1px rgb(var(--cds-color-other-purple-line));
+}
+</style>
+```
+
+## CSS Grid mode
+
+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%'`.
+
+**Example (SFC):**
+
+```vue
+<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: rgb(var(--cds-color-status-progress-fill));
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  font-size: 12px;
+  color: rgb(var(--cds-color-content-secondary));
+  background-color: rgb(var(--cds-color-surface-primary));
+  box-shadow: 0 0 0 1px rgb(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.
+
+**Example (SFC):**
+
+```vue
+<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: rgb(var(--cds-color-status-progress-fill));
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  font-size: 12px;
+  color: rgb(var(--cds-color-content-secondary));
+  background-color: rgb(var(--cds-color-surface-primary));
+  box-shadow: 0 0 0 1px rgb(var(--cds-color-status-progress-line));
+}
+</style>
+```
+
+## CSS classes
+
+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.
+
+**Example (SFC):**
+
+```vue
+<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: rgb(var(--cds-color-status-progress-fill));
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  font-size: 12px;
+  color: rgb(var(--cds-color-content-secondary));
+  background-color: rgb(var(--cds-color-surface-primary));
+  box-shadow: 0 0 0 1px rgb(var(--cds-color-status-progress-line));
+}
+</style>
+```
+
+## 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.
+
+**Example (SFC):**
+
+```vue
+<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.
+
+**Example (SFC):**
+
+```vue
+<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 appearance="tertiary" 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.
+
+**Example (SFC):**
+
+```vue
+<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>
+```

package/skills/cds-builder/references/components/cds-grid/guidelines.md

@@ -0,0 +1,9 @@
+# CdsGrid — guidelines
+
+> Extracted from `docs/demos/Guidelines.vue` by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md).
+
+| ✅ Do | ❌ Don't |
+| --- | --- |
+| The spans of a row add up to the full width of the grid — 16 columns. | Spans adding up to more than 16 wrap a column onto a new line and break the row. |
+| The content stretches together with the column and survives a change of breakpoint. | A fixed width argues with the grid and overflows the column on narrow screens. |