SimpleGrid

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

Задаётся свойством 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.

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