CardGrid
Компонент-контейнер для создания адаптивных сеток из Card.
Выбирает необходимую сетку в зависимости от указанного размера, обеспечивает семантически правильную разметку по умолчанию.
Связанные компоненты:
Загружается...
Размер карточек
Свойство size задаёт нужную сетку и накладывает определённые ограничения на пропорции карточек.
Соблюдение пропорций осуществляется самостоятельно
(например, с помощью компонента AspectRatio, как в примере выше).
| Размер | Пропорции | Сетка | Типовое применение |
|---|---|---|---|
s | высота 92% (≈1:1.08) от ширины | Три в ряд | Квадратные элементы |
m | высота 62% (≈1:1.61) от ширины | Два в ряд | Горизонтальные карточки |
l | высота 30% (≈1:3.33) от ширины | Один в ряд | Широкие баннеры |
Загружается...
Доступность (a11y)
- По умолчанию используется семантический тег
<ul>. - Для одиночных сеток вне списков меняйте тег через
Component. - Добавляйте
ARIA-роли при необходимости.
Свойства и методы
| Свойство | Описание |
|---|---|
Component | ElementType<any, keyof IntrinsicElements>По умолчанию: ul |
getRootRef | Ref<HTMLDivElement>По умолчанию: - |
padding | booleanЕсли true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа. По умолчанию: false |
size | "s" | "m" | "l"Размер карточек. По умолчанию: s |