SimpleGrid

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

Загружается...

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

Задаётся свойством 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 ↗-отступы;
"auto-block" — включены платформенные block ↗-отступы.

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

Загружается...

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

Свойства и методы

Свойство	Описание
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"` Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`. По умолчанию: `stretch`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`blockSize`	`SizeProp` Размер элемента по блочной оси (при горизонтальном направлении письма - высота элемента). По умолчанию: `-`
`columns`	`number` Количество колонок. По умолчанию: `1`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`display`	`"none" \| "grid" \| "inline-grid"` Возможность задать css-свойство `display`. По умолчанию: `grid`
`flexBasis`	`FlexBasisProp` Определяет начальный размер flex-элемента. По умолчанию: `-`
`flexGrow`	`FlexGrowProp` Определяет, насколько элемент будет расти относительно остальных flex-элементов. По умолчанию: `-`
`flexShrink`	`FlexShrinkProp` Определяет, насколько элемент будет сжиматься относительно остальных flex-элементов. По умолчанию: `-`
`gap`	`GapsProp` Отступы между элементами. Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям. Через массив можно задать отступ между столбцами и строками [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`). По умолчанию: `-`
`margin`	`"auto" \| "none" \| "auto-inline" \| "auto-block"` Управляет отступами вокруг контейнера Значение `none` позволяет отключить отступы Значение `auto` позволяет задать платформенные отступы Значение `auto-inline` позволяет задать платформенные inline-отступы Значение `auto-block` позволяет задать платформенные block-отступы. По умолчанию: `none`
`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` Позиционирование элемента. По умолчанию: `-`

Separator

Spacing