---
description: Компонент для позиционирования элементов, построенный на базе grid layout.
---

<Overview group="layout">

# SimpleGrid [tag:component]

Компонент для позиционирования элементов, построенный на базе [grid layout](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout).

</Overview>

{/* @example-description: Базовая сетка `SimpleGrid` с фиксированным количеством колонок и отступами. */}
<Playground>
  ```jsx
  <SimpleGrid gap="m" columns={3}>
    <Avatar size={48} initials="ДС" gradientColor="orange" />
    <Avatar size={48} initials="ИМ" gradientColor="yellow" />
    <Avatar size={48} initials="ВЖ" gradientColor="violet" />
    <Avatar size={48} initials="ЭМ" gradientColor="green" />
    <Avatar size={48} initials="ВД" gradientColor="blue" />
  </SimpleGrid>
  ```
</Playground>

## Отступ между элементами

Задаётся свойством `gap`.

Принимает значение либо числовое (в пикселях), либо из списка предопределённых
дизайн-системой значений (`"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"`).

При передаче примитивного значения отступы между строками и столбцами будут одинаковы и равны переданному значению.
При передаче массива (`[row, column]`) есть возможность задать разные значения
для строк (первый элемент массива) и столбцов (второй элемент массива).

## Распределение пространства

Компонент позволяет равномерно распределять элементы в контейнере, указав либо свойство `columns`, либо свойство `minColWidth`
(они взаимоисключающие).

Свойство `columns` отвечает за количество колонок (тогда пространство будет поделено на это заданное количество).

Свойство `minColWidth` отвечает за минимальную ширину каждого элемента (количество колонок будет определено автоматически
с учетом минимальной ширины колонки).

## Выравнивание контента

### Выравнивание по вспомогательной оси

Задаётся свойством `align` и эквивалентно `CSS`-свойству `align-items`.

- `"start"` — элементы располагаются в начале вспомогательной оси;
- `"end"` — элементы располагаются в конце вспомогательной оси;
- `"center"` — элементы располагаются по центру вспомогательной оси;
- `"stretch"` — элементы растягиваются на всё доступное пространство по вспомогательной оси;
- `"baseline"` — элементы располагаются по базовой линии.

## Отступы вокруг контейнера

Задаётся свойством `margin`.

- `"none"` — отступы отсутствуют (по умолчанию);
- `"auto"` — включены платформенные отступы;
- `"auto-inline"` — включены платформенные [`inline`](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_display/Flow_layout)-отступы;
- `"auto-block"` — включены платформенные [`block`](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_display/Flow_layout)-отступы.

Значение `margin="auto"`/`"auto-inline"`/`"auto-block"` нужно для того, чтобы визуально выравнивать контент в `SimpleGrid` с остальными компонентами
VKUI (например, [`Header`](/components/group#header) и [`SimpleCell`](/components/simple-cell)). Поэтому его использование обычно актуально только для верхнеуровневых
компонентов `SimpleGrid`.

{/* @example-description: Использование `SimpleGrid` c `margin="auto"` для выравнивания внутри `Group`. */}
<Playground>
  ```jsx
  <Group mode="card" header={<Header size="s">Друзья</Header>}>
    <SimpleGrid gap="m" columns={2} margin="auto">
      <Avatar size={48} initials="ДС" gradientColor="orange" />
      <Avatar size={48} initials="ИМ" gradientColor="yellow" />
      <Avatar size={48} initials="ВЖ" gradientColor="violet" />
      <Avatar size={48} initials="ЭМ" gradientColor="green" />
    </SimpleGrid>
  </Group>
  ```
</Playground>

## Свойства компонентов раскладки

> Компонент `SimpleGrid` обладает общими свойствами, которые позволяют управлять отступами, размерами, позиционированием,
> переполнением и flex-свойствами.
> Подробнее про эти свойства можно почитать на соответствующей странице [`Box`](/components/box/#layout-props).

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

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "baseline" \| "end" \| "stretch"` | `stretch` | Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`. |
| `alignSelf` | `AlignSelfProp` | `-` | Для задания выравнивания, отличного от установленного на родителе, эквивалентно `align-self`. |
| `blockSize` | `SizeProp` | `-` | Размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента). |
| `columns` | `number` | `1` | Количество колонок. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `display` | `"none" \| "grid" \| "inline-grid"` | `grid` | Возможность задать css-свойство `display`. |
| `flexBasis` | `FlexBasisProp` | `-` | Определяет начальный размер flex-элемента. |
| `flexGrow` | `FlexGrowProp` | `-` | Определяет, насколько элемент будет расти относительно остальных flex-элементов. |
| `flexShrink` | `FlexShrinkProp` | `-` | Определяет, насколько элемент будет сжиматься относительно остальных flex-элементов. |
| `gap` | `GapsProp` | `0` | Отступы между элементами. Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям. Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются. |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `inlineSize` | `SizeProp` | `-` | Размер элемента по строчной оси (при горизонтальном направлении письма - ширина элемента). |
| `inset` | `InsetProp` | `-` | Смещение элемента по `top`, `right`, `bottom` и `left` одновременно. |
| `insetBlock` | `InsetProp` | `-` | Боковое смещение по блочной оси (при горизонтальном направлении письма - свойства `top`/`bottom`). |
| `insetBlockEnd` | `InsetProp` | `-` | Смещение конечного отступа по блочной оси (при горизонтальном направлении письма - свойство `bottom`). |
| `insetBlockStart` | `InsetProp` | `-` | Смещение начального отступа по блочной оси (при горизонтальном направлении письма - свойство `top`). |
| `insetInline` | `InsetProp` | `-` | Боковое смещение по строчной оси (при горизонтальном направлении письма - свойства `left`/`right`). |
| `insetInlineEnd` | `InsetProp` | `-` | Смещение конечного отступа по строчной оси (при горизонтальном направлении письма - свойство `right`). |
| `insetInlineStart` | `InsetProp` | `-` | Смещение начального отступа по строчной оси (при горизонтальном направлении письма - свойство `left`). |
| `justifySelf` | `JustifySelfProp` | `-` | Для задания выравнивания, отличного от установленного на родителе, эквивалентно `justify-self`. |
| `margin` | `"none" \| "auto" \| MarginProp \| "auto-inline" \| "auto-block"` | `none` | Внешние отступы контейнера. Дополнительно поддерживаются специальные значения: `none` — отключает дополнительные отступы; `auto` — включает платформенные отступы вокруг контейнера; `auto-inline` — включает платформенные inline-отступы; `auto-block` — включает платформенные block-отступы. |
| `marginBlock` | `MarginProp` | `-` | Внешние отступы по блочной оси. |
| `marginBlockEnd` | `MarginProp` | `-` | Внешний конечный отступ по блочной оси. |
| `marginBlockStart` | `MarginProp` | `-` | Внешний начальный отступ по блочной оси. |
| `marginInline` | `MarginProp` | `-` | Внешние отступы по строчной оси. |
| `marginInlineEnd` | `MarginProp` | `-` | Внешний конечный отступ по строчной оси. |
| `marginInlineStart` | `MarginProp` | `-` | Внешний начальный отступ по строчной оси. |
| `maxBlockSize` | `SizeProp` | `-` | Максимальный размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента). |
| `maxInlineSize` | `CSSGlobalValue \| ((string \| number) & Nothing) \| "max-content" \| "min-content" \| "fit-content"` | `-` | Максимальный размер элемента по строчной оси (при горизонтальном направлении письма - ширина элемента). |
| `minBlockSize` | `SizeProp` | `-` | Минимальный размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента). |
| `minColWidth` | `number` | `-` | Вместо задания количества колонок, можно указать минимальную ширину элементов. |
| `minInlineSize` | `CSSGlobalValue \| ((string \| number) & Nothing) \| "max-content" \| "min-content" \| "fit-content"` | `-` | Минимальный размер элемента по строчной оси (при горизонтальном направлении письма - ширина элемента). |
| `overflow` | `OverflowValue` | `-` | Управление переполнением содержимого. |
| `overflowBlock` | `OverflowValue` | `-` | Управление переполнением содержимого по блочной оси (при горизонтальном направлении письма - свойство `overflow-y`). |
| `overflowInline` | `OverflowValue` | `-` | Управление переполнением содержимого по строчной оси (при горизонтальном направлении письма - свойство `overflow-x`). |
| `padding` | `PaddingProp` | `-` | Внутренние отступы со всех сторон. |
| `paddingBlock` | `PaddingProp` | `-` | Внутренние отступы по блочной оси. |
| `paddingBlockEnd` | `PaddingProp` | `-` | Внутренний конечный отступ по блочной оси. |
| `paddingBlockStart` | `PaddingProp` | `-` | Внутренний начальный отступ по блочной оси. |
| `paddingInline` | `PaddingProp` | `-` | Внутренние отступы по строчной оси. |
| `paddingInlineEnd` | `PaddingProp` | `-` | Внутренний конечный отступ по строчной оси. |
| `paddingInlineStart` | `PaddingProp` | `-` | Внутренний начальный отступ по строчной оси. |
| `position` | `PositionValue` | `-` | Позиционирование элемента. |