import {Meta, Unstyled} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/wiki/styles/# Макетные утилиты'/>

# Макетные утилиты

Набор CSS-классов для организации пространственной структуры демонстрационных зон в Storybook и Wiki. Эти классы позволяют быстро создавать сетки, флекс-контейнеры и ограничивать ширину контента.

Все классы имеют префикс `.wiki-storybook-`.


## Контейнер

Класс `.wiki-storybook-container` инициализирует контейнер типа `inline-size`. Это позволяет вложенным элементам использовать `@container` запросы.

```html
<div class="wiki-storybook-container">
  <!-- Контент, реагирующий на ширину этого контейнера -->
</div>
```

## Сетка

Класс `.wiki-storybook-group` создает CSS Grid контейнер с 12 колонками и стандартным отступом `8px`.

```html
<div class="wiki-storybook-group">
  <div class="wiki-storybook-item wiki-storybook-item--squared--xs">Span XS</div>
  <div class="wiki-storybook-item wiki-storybook-item--squared--xs">Span XS</div>
  <div class="wiki-storybook-item wiki-storybook-item--squared--sm">Span SM</div>
</div>
```

<Unstyled>
  <div class="wiki-storybook-group">
    <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--squared--xs">Span XS</div>
    <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--squared--xs">Span XS</div>
    <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--squared--sm">Span SM</div>
  </div>
</Unstyled>


## Флекс-слои

Утилиты для быстрого выравнивания элементов по горизонтали или вертикали.

### Стандартный Flex
Класс `.wiki-storybook-flex` — горизонтальный стек с переносом и отступом `8px`.

```html
<div class="wiki-storybook-flex">
    <div class="wiki-storybook-item">1</div>
    <div class="wiki-storybook-item">2</div>
    <div class="wiki-storybook-item">3</div>
</div>
```

<Unstyled>
  <div class="wiki-storybook-flex">
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
  </div>
</Unstyled>

### Центрирование (Flex Center)
Класс `.wiki-storybook-flex-center` выравнивает контент строго по центру.

```html
<div class="wiki-storybook-flex-center">
    <div class="wiki-storybook-item">1</div>
    <div class="wiki-storybook-item">2</div>
    <div class="wiki-storybook-item">3</div>
</div>
```

<Unstyled>
  <div class="wiki-storybook-flex-center">
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
  </div>
</Unstyled>

### Выравнивание по центру (Flex Align Center)
Класс `.wiki-storybook-flex-align-center` выравнивает элементы по горизонтали с центрированием по вертикали.

```html
<div class="wiki-storybook-flex-align-center">
    <div class="wiki-storybook-item">1</div>
    <div class="wiki-storybook-item">2</div>
    <div class="wiki-storybook-item">3</div>
</div>
```

<Unstyled>
  <div class="wiki-storybook-flex-align-center">
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
  </div>
</Unstyled>

### Вертикальный стек (Flex Column)
Класс `.wiki-storybook-flex-column` располагает элементы вертикально с отступом `16px`.

```html
<div class="wiki-storybook-flex-column">
    <div class="wiki-storybook-item">1</div>
    <div class="wiki-storybook-item">2</div>
    <div class="wiki-storybook-item">3</div>
</div>
```

<Unstyled>
  <div class="wiki-storybook-flex-column">
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
  </div>
</Unstyled>
