---
description: Компонент-контейнер для создания адаптивных сеток из Card.
tags: card
---

<Overview group="layout">

# CardGrid [tag:component]

Компонент-контейнер для создания адаптивных сеток из [`Card`](/components/card).
Выбирает необходимую сетку в зависимости от указанного размера, обеспечивает семантически правильную разметку по умолчанию.

Связанные компоненты:

- [Card](/components/card)
- [ContentCard](/components/content-card)

</Overview>

import { BlockWrapper } from '@/components/wrappers';

{/* @example-description: Базовая сетка `CardGrid` размера `s` с тремя карточками одинаковых пропорций. */}
<Playground Wrapper={BlockWrapper}>
  ```jsx
  <CardGrid size="s">
    <Card mode="shadow">
      <AspectRatio ratio={100 / 92}>
        <div />
      </AspectRatio>
    </Card>
    <Card mode="shadow">
      <AspectRatio ratio={100 / 92}>
        <div />
      </AspectRatio>
    </Card>
    <Card mode="shadow">
      <AspectRatio ratio={100 / 92}>
        <div />
      </AspectRatio>
    </Card>
  </CardGrid>
  ```
</Playground>

## Размер карточек

Свойство `size` задаёт нужную сетку и накладывает определённые ограничения на пропорции карточек.
Соблюдение пропорций осуществляется самостоятельно
(например, с помощью компонента [`AspectRatio`](/components/aspect-ratio), как в примере выше).

| Размер | Пропорции                      | Сетка      | Типовое применение      |
| :----: | ------------------------------ | ---------- | ----------------------- |
|  `s`   | высота 92% (≈1:1.08) от ширины | Три в ряд  | Квадратные элементы     |
|  `m`   | высота 62% (≈1:1.61) от ширины | Два в ряд  | Горизонтальные карточки |
|  `l`   | высота 30% (≈1:3.33) от ширины | Один в ряд | Широкие баннеры         |

{/* @example-description: Сравнение размеров сетки `m` и `l` для разных сценариев компоновки карточек. */}
<Playground Wrapper={BlockWrapper}>
  ```jsx
  <CardGrid size="m">
    <Card mode="shadow">
      <AspectRatio ratio={100 / 62}>
        <div />
      </AspectRatio>
    </Card>
    <Card mode="shadow">
      <AspectRatio ratio={100 / 62}>
        <div />
      </AspectRatio>
    </Card>
  </CardGrid>
  <CardGrid size="l">
    <Card mode="shadow">
      <AspectRatio ratio={100 / 30}>
        <div />
      </AspectRatio>
    </Card>
  </CardGrid>
  ```
</Playground>

## Доступность (a11y) [#a11y]

- По умолчанию используется семантический тег `<ul>`.
- Для одиночных сеток вне списков меняйте тег через `Component`.
- Добавляйте `ARIA`-роли при необходимости.

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `ul` |  |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `padding` | `boolean` | `false` | Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа. |
| `size` | `"s" \| "m" \| "l"` | `s` | Размер карточек. |