---
metadata:
  - name: generator
    content: Diplodoc Platform v5.50.3
alternate:
  - https://divkit.tech/docs/en/concepts/location.md
  - https://divkit.tech/docs/ru/concepts/location.md
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt

# Группировка элементов

## Контейнер {#container}

Самый базовый элемент, который отвечает за расположение дочерних элементов — [container](https://divkit.tech/docs/ru/concepts/divs/2/div-container.md). Элементы в нем находятся в том порядке, в котором они указаны.

В параметре `orientation` указываются типы расположения элементов:

- `vertical` — для вертикального расположения;

    {% cut "Посмотреть интерактивный пример" %}

    <iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/location_1.json" width="700" height="500" frameborder="1"></iframe>

    {% endcut %}

- `horizontal` — для горизонтального расположения;

    {% cut "Посмотреть интерактивный пример" %}

    <iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/location_2.json" width="700" height="500" frameborder="1"></iframe>

    {% endcut %}

- `overlap` — с наложением.

    {% cut "Посмотреть интерактивный пример" %}


    <iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/ru/location_3_ru.json" width="700" height="500" frameborder="1"></iframe>



    {% endcut %}

    Чтобы элемент занял все свободное место, его [ширина](https://divkit.tech/docs/ru/concepts/layout.md) должна быть `match_parent`. Если таких элементов несколько, они поделят место поровну или распределят его согласно значению параметра `weight`, если он указан.

    Чем меньше номер элемента в массиве `items` при `orientation:"overlap"`, тем ниже он будет расположен. Нулевой элемент контейнера будет в самом низу.

В параметре `layout_mode` можно указать тип размещения элементов. Значение `wrap` означает перенос элементов на следующую строку, если они не поместились на предыдущей. По умолчанию `layout_mode` равен `no_wrap`.

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/location_4.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}

## Сетка {#grid}

Элемент [grid](https://divkit.tech/docs/ru/concepts/divs/2/div-grid.md) используется для сложной структуры табличной верстки. Он позволяет располагать элементы в нескольких столбцах и строках.

![](../_images/bridges.png =300x)

Можно объединять ячейки в строке или столбце:

- `row_span` — параметр для объединения строк;
- `column_span` — параметр для объединения столбцов.

![](../_images/create-card/grid-2.png =300x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/location_5.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}


Вес элемента (`weight`) определяет, сколько пространства он занимает внутри сетки. Может применяться как к ширине, так и к высоте.

![](../_images/create-card/grid-1.png =300x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/location_6.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}



## Пейджер {#pager}

Элемент [pager](https://divkit.tech/docs/ru/concepts/divs/2/div-pager.md) отображает горизонтальный набор карточек, где полностью видна основная карточка, а соседние показываются частично.

![](../_images/create-card/pager.png =300x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/location_7.json" width="700" height="500" frameborder="1"></iframe>

{% endcut %}

Настроить ширину основной карточки возможно в поле `layout_mode`:

- [fixed](https://divkit.tech/docs/ru/concepts/divs/2/div-neighbour-page-size.md) — показывается фиксированная часть соседних карточек, остальное место занимает основная карточка.
- [percentage](https://divkit.tech/docs/ru/concepts/divs/2/div-page-size.md) — ширина основной карточки указывается в процентах от ширины пейджера.

Пейджер удобно использовать вместе с [индикатором](https://divkit.tech/docs/ru/concepts/divs/2/div-indicator.md), чтобы отображать, какая карточка выбрана. Индикатор можно располагать независимо от пейджера. Внешний вид индикатора можно изменить: поддерживается настройка расстояний между индикаторами, формы, цвета, размера, анимаций переключения.

![](../_images/create-card/pager-example.png =300x)

{% cut "Посмотреть интерактивный пример" %}

<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/location_8.json" width="700" height="500" frameborder="1"></iframe>

{% endcut %}

## Галерея {#gallery}

Картинки внутри элемента [gallery](https://divkit.tech/docs/ru/concepts/divs/2/div-gallery.md) могут быть любого размера и содержимого, им необязательно быть однотипными. Параметр `item_spacing` определяет расстояние между элементами галереи кроме первого и последнего отступа от краев — ими можно управлять с помощью `paddings`.

Высота галереи устанавливается по высоте самого большого элемента.

![](../_images/create-card/gallery.png =300x)

{% cut "Посмотреть интерактивный пример" %}

<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/location_9.json" width="700" height="500" frameborder="1"></iframe>

{% endcut %}

## Табы {#tabs}

Элемент [tabs](https://divkit.tech/docs/ru/concepts/divs/2/div-tabs.md) отличается от галереи наличием строки-заголовка. Одномоментно видно только одну страницу, остальные можно переключить свайпами.

Высота табов на разных платформах отличается:

- В Android первый таб оригинальной высоты. Высота оставшихся табов (со второго по последний) одинакова и равна максимальному из их значений.
- В iOS все табы оригинальной высоты.

![](../_images/create-card/tabs.png =300x)

{% cut "Посмотреть интерактивный пример" %}

<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/location_10.json" width="700" height="500" frameborder="1"></iframe>

{% endcut %}

## Разделитель {#separator}

Элемент [separator](https://divkit.tech/docs/ru/concepts/divs/2/div-separator.md) используется для разделения места между элементами.

Стиль разделителя определяется объектом `delimiter_style`:

```json
{
  "type": "separator",
  "delimiter_style": {
    "color": "#000000",
    "orientation": "vertical"
  }
}
```

- `orientation`&nbsp;— ориентация разделителя. Может быть `vertical` (вертикальная) или `horizontal` (горизонтальная).
- `color`&nbsp;— цвет разделительной полосы. Чтобы она не отображалась, укажите прозрачный цвет `#00000000`.

Высота разделительной полосы не зависит от высоты самого элемента&nbsp;— она всегда будет равна 1&nbsp;dp. Если указать размеры разделителя больше&nbsp;— разделительная полоса просто отрисуется посередине.

{% cut "Посмотреть интерактивный пример" %}

<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/location_11.json" width="700" height="500" frameborder="1"></iframe>

{% endcut %}

## Управление табами, пейджером и галереей {#control}

Для управления используйте действия с [переключением элементов](https://divkit.tech/docs/ru/concepts/interaction.md#switch-elements).

<!-- source: ru/_includes/index/troubleshooting.md -->
## Узнать больше {#troubleshooting}

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru).



[Репозиторий DivKit](https://github.com/divkit/divkit)




<!-- endsource: ru/_includes/index/troubleshooting.md -->