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

<Meta title='@dxtmisha/en/wiki/styles/# Layout Utilities'/>

# Layout Utilities

A set of CSS classes for organizing the spatial structure of demonstration areas within Storybook and Wiki. These classes allow you to quickly create grids, flex containers, and restrict content width.

All classes use the `.wiki-storybook-` prefix.


## Container

The `.wiki-storybook-container` class initializes an `inline-size` container. This allows child elements to utilize `@container` queries.

```html
<div class="wiki-storybook-container">
  <!-- Content that reacts to the width of this container -->
</div>
```


## Grid

The `.wiki-storybook-group` class creates a CSS Grid container with 12 columns and a standard `8px` gap.

```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 Layouts

Utilities for quickly aligning elements horizontally or vertically.

### Standard Flex
The `.wiki-storybook-flex` class — a horizontal stack with wrapping and an `8px` gap.

```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>

### Centering (Flex Center)
The `.wiki-storybook-flex-center` class aligns content perfectly at the 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>

### Vertical Alignment (Flex Align Center)
The `.wiki-storybook-flex-align-center` class aligns elements horizontally with centered vertical alignment.

```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>

### Vertical Stack (Flex Column)
The `.wiki-storybook-flex-column` class arranges elements vertically with a `16px` gap.

```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>
