---
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/en/llms.txt
# Element groups
## Container {#container}
The most basic element that is responsible for the position of child elements is [container](https://divkit.tech/docs/en/concepts/divs/2/div-container.md). The elements in it are shown in the order they are specified.
In the `orientation` parameter, the following types of element orientations are specified:
- `vertical`: For vertical orientation.
{% cut "View an interactive example" %}
{% endcut %}
- `horizontal`: For horizontal orientation.
{% cut "View an interactive example" %}
{% endcut %}
- `overlap`: With overlap.
{% cut "View an interactive example" %}
{% endcut %}
In order for the element to occupy all the free space, its [width](https://divkit.tech/docs/en/concepts/layout.md) must be `match_parent`. If there are several such elements, they will divide the space equally or distribute it according to the value of the `weight` parameter if specified.
The smaller the number of the element in the `items` array at `orientation:"overlap"`, the lower its position. The zero element of the container will be at the very bottom.
With the `layout_mode` parameter, you can control how elements are arranged. The `wrap` value indicates that the element wraps to the next line if it doesn't fit on the previous one. By default, `layout_mode` is set to `no_wrap`.
{% cut "View an interactive example" %}
{% endcut %}
## Grid {#grid}
The [grid](https://divkit.tech/docs/en/concepts/divs/2/div-grid.md) element is used for the complex structure of the table layout. You can use it to position elements in multiple columns and rows.
You can merge cells in a row or a column:
- `row_span`: Parameter for merging rows.
- `column_span`: Parameter for merging columns.
{% cut "View an interactive example" %}
{% endcut %}
The element weight (`weight`) determines how much space an element occupies inside the grid. It can be applied to both the width and height.
{% cut "View an interactive example" %}
{% endcut %}
## Pager {#pager}
The [pager](https://divkit.tech/docs/en/concepts/divs/2/div-pager.md) element displays a horizontal set of cards, where the main card is fully visible, and the neighboring ones are partially shown.
{% cut "View an interactive example" %}
{% endcut %}
You can adjust the width of the main card in the `layout_mode` field:
- [fixed](https://divkit.tech/docs/en/concepts/divs/2/div-neighbour-page-size.md): A fixed part of the adjacent cards is shown, and the remaining space is taken up by the main card.
- [percentage](https://divkit.tech/docs/en/concepts/divs/2/div-page-size.md): The width of the main card is indicated as a percentage of the width of the pager.
You can use the pager along with an [indicator](https://divkit.tech/docs/en/concepts/divs/2/div-indicator.md) to display which card has been selected. The indicator can be positioned independently of the pager. The appearance of the indicator can be changed: you can adjust the distances between indicators, their shapes, colors, sizes, and switching animations.
{% cut "View an interactive example" %}
{% endcut %}
## Gallery {#gallery}
Pictures inside the [gallery](https://divkit.tech/docs/en/concepts/divs/2/div-gallery.md) element can be any size or content. They don't have to be the same type. The `item_spacing` parameter defines spacing between gallery elements except for the first and last margins: they can be managed using `paddings`.
The gallery height is set according to the height of the largest element.
{% cut "View an interactive example" %}
{% endcut %}
## Tabs {#tabs}
The [tabs](https://divkit.tech/docs/en/concepts/divs/2/div-tabs.md) element is different from the gallery because it has a header row. Only one page is visible at a time. You can switch to others by swiping.
The height of tabs is different on different platforms:
- On Android, the first tab is the original height. The height of the remaining tabs (from the second to the last) is the same and is equal to their maximum value.
- On iOS, all tabs are the original height.
{% cut "View an interactive example" %}
{% endcut %}
## Separator {#separator}
The [separator](https://divkit.tech/docs/en/concepts/divs/2/div-separator.md) element is used to divide space between elements.
The separator style is determined by the `delimiter_style` object:
```json
{
"type": "separator",
"delimiter_style": {
"color": "#000000",
"orientation": "vertical"
}
}
```
- `orientation`: Separator orientation. It can be either `vertical` or `horizontal`.
- `color`: Separator line color. To hide it, specify the transparent color `#00000000`.
The height of the separator line is independent form the height of the element itself and always equals 1 dp. Specifying a larger separator size will cause the separator to appear in the middle.
{% cut "View an interactive example" %}
{% endcut %}
## Controlling tabs, pager, and gallery {#control}
To control these elements, use actions with [element switching](https://divkit.tech/docs/en/concepts/interaction.md#switch-elements).
## Learn more {#troubleshooting}
You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).
[DivKit Repository](https://github.com/divkit/divkit)