EvoKit - Grid

Резиновый макет сетки.

Cетка вмещает до 10 столбцов. Она использует блоки с предварительно определенными классами внутри каждой сетки, которые определяют ширину столбца. Кроме того, можно создавать вложенную разметку.

Использование

Для того, чтобы создать контейнер сетки, добавьте класс .grid к родительскому блоку и класс .grid__item дочерним элементам.

HTML

<link href="@evokit/grid/dist/style.css" rel="stylesheet">

<div class='grid'>
    <div class='grid__item'>
        ...
    </div>
</div>

JSX

import Grid from 'evokit-grid';

<Grid>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Колонки

| Class | Description | |---------------------------------------|-------------------------------------------| | .grid_column_1 до .grid_column_10 | Делит на равные колонки. |

HTML

<div class='grid grid_column_2'>
    <div class='grid__item'>
        ...
    </div>
    <div class='grid__item'>
        ...
    </div>
</div>

JSX

<Grid column={2}>
    <Grid.Item>
        ...
    </Grid.Item>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Расстояние между ячейками

По умолчанию, сетка не имеет отступов.

| Class | Description | |---------------------------|-----------------------------| | .grid_size_xxs | 5px. | | .grid_size_xs | 10px. | | .grid_size_s | 15px. | | .grid_size_m | 20px. | | .grid_size_l | 25px. | | .grid_size_xl | 30px. | | .grid_size_xxl | 35px. | | .grid_size_xxxl | 40px. |

HTML

<div class='grid grid_size_xl'>
    <div class='grid__item'>
        ...
    </div>
    <div class='grid__item'>
        ...
    </div>
</div>

JSX

<Grid size='xl'>
    <Grid.Item>
        ...
    </Grid.Item>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Направление ячеек

Устанавливает главную ось main-axis, определяя тем самым направление для элементов сетки. По умолчанию, слева направо.

| Class | Description | |-----------------------|-----------------------------| | .grid_direction_row | Cлева направо для ltr, справа налево для rtl | | .grid_direction_row-reverse | Cправа налево для ltr, слева направо для rtl | | .grid_direction_column | Aналогично row сверху вниз | | .grid_direction_column-reverse | Aналогично row-reverse, снизу вверх. |

HTML

<div class='grid grid_direction_row-reverse'>
    <div class='grid__item'>
        ...
    </div>
    <div class='grid__item'>
        ...
    </div>
</div>

JSX

<Grid direction='row-reverse'>
    <Grid.Item>
        ...
    </Grid.Item>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Перенос ячеек

В одной строке может быть много элементов. Модификатор задает правила переноса.

| Class | Description | |-----------------------------|---------------------------------------------------------| | .grid_wrap_nowrap | Элементы не переносятся | | .grid_wrap_wrap | Переносятся | | .grid_wrap_wrap-reverse | Переносятся и располагаются в обратном порядке |

HTML

<div class='grid grid_wrap_nowrap'>
    <div class='grid__item'>
        ...
    </div>
    <div class='grid__item'>
        ...
    </div>
</div>

JSX

<Grid wrap='nowrap'>
    <Grid.Item>
        ...
    </Grid.Item>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Вложенные сетки

Можно легко расширить макет сетки с вложенными сетками.

HTML

<div class='grid grid_column_2'>
    <div class='grid__item'>
        ...
    </div>
    <div class='grid__item'>
        <div class='grid grid_column_3'>
            <div class='grid__item'>
                ...
            </div>
            <div class='grid__item'>
                ...
            </div>
            <div class='grid__item'>
                ...
            </div>
        </div>
    </div>
</div>

JSX

<Grid column={2}>
    <Grid.Item>
        ...
    </Grid.Item>
    <Grid.Item>
        <Grid column={3}>
            <Grid.Item>
                ...
            </Grid.Item>
            <Grid.Item>
                ...
            </Grid.Item>
            <Grid.Item>
                ...
            </Grid.Item>
        </Grid>
    </Grid.Item>
</Grid>

Горизонтальное выравнивание

По умолчанию, сетка выровнена по левому краю.

| Class | Description | |---------------------------|-------------------------------| | .grid_align_left | Выравнивание по левому краю. | | .grid_align_right | Выравнивание по правому краю. | | .grid_align_center | Выравнивание по центру. | | .grid_align_justify | Выравнивание по краям. |

HTML

<div class="grid grid_align_center">
    <div class="grid__item">
        ...
    </div>
</div>

JSX

<Grid align='center'>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Вертикальное выравние

По умолчанию, сетка выровнена к верху.

| Class | Description | |-----------------------------|-------------------------| | .grid_valign_middle | Выравнивание по центру. | | .grid_valign_bottom | Выравнивание к низу. | | .grid_valign_justify | Выравнивание к краям. | | .grid_valign_baseline | Выравнивает базовую линию ячейки с базовой линией первой текстовой строки. |

HTML

<div class='grid grid_valign_justify'>
    <div class='grid__item'>
        ...
    </div>
    <div class='grid__item'>
        ...
    </div>
</div>

JSX

<Grid valign='justify'>
    <Grid.Item>
        ...
    </Grid.Item>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Ширина ячейки

Ширина ячейки определяется для элемента секти .grid__item.

| Class | Description | |----------------------------------------|------------------------------------------------------| | .grid__item_width-1-1 | Заполняет 100% доступной ширины. | | .grid__item_width-1-2 | Деление на две половины, 50%. | | .grid__item_width-1-3 до .grid__item_width-2-3 | Деление на три части. | | .grid__item_width-1-4 до .grid__item_width-3-4 | Деление на четыре части. | | .grid__item_width-1-5 до .grid__item_width-4-5 | Деление на пять частей. | | .grid__item_width-1-6 до .grid__item_width-5-6 | Деление на шесть частей. | | ... | ... | | .grid__item_width-1-10 до .grid__item_width-9-10 | Деление на десять частей. |

Например класс .grid__item_width-5-10 будет работать точно так же как .grid__item_width-1-2.

HTML

<div class='grid'>
    <div class='grid__item grid__item_width-1-3'>
        ...
    </div>
</div>

JSX

<Grid>
    <Grid.Item width='1-3'>
        ...
    </Grid.Item>
</Grid>

Порядок ячеек

Задает порядок следования элемента сетки .grid__item.

| Class | Description | |----------------------------------------|----------------------------| | .grid__item_order-1 до .grid__item_order-10 | Целое число. |

По умолчанию все элементы будут следовать друг за другом в порядке, заданном в html.

HTML

<div class='grid'>
    <div class='grid__item grid__item_order-2'>
        ...
    </div>
    <div class='grid__item grid__item_order-1'>
        ...
    </div>
</div>

JSX

<Grid>
    <Grid.Item order={2}>
        ...
    </Grid.Item>
    <Grid.Item order={1}>
        ...
    </Grid.Item>
</Grid>