---
metadata:
- name: generator
content: Diplodoc Platform v5.50.3
alternate:
- https://divkit.tech/docs/en/concepts/layout.md
- https://divkit.tech/docs/ru/concepts/layout.md
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt
# Element location and size
## Size {#size}
### Size types {#size-types}
You can adjust the size of the elements in the card using the `width` and `height` parameters of the `container` element. They have one of the following [size](https://divkit.tech/docs/en/concepts/divs/2/div-size.md) values:
- [match_parent](https://divkit.tech/docs/en/concepts/divs/2/div-match-parent-size.md): The default width value, the element adjusts to the block containing it.
- [wrap_content](https://divkit.tech/docs/en/concepts/divs/2/div-wrap-content-size.md): The default height value, the element adjusts to its content.
- [fixed](https://divkit.tech/docs/en/concepts/divs/2/div-fixed-size.md): The fixed size value.
To make the element occupy half the height or be located at the bottom of the container, use `match_parent`. The algorithm distributes space in the following order:
1. The space is occupied by elements with the `fixed` and `wrap_content` size values.
1. The remaining space is divided by elements with the `match_parent` size value. By default, all elements with the `match_parent` size value divide the space equally or distribute it according to the value of the `weight` parameter, if specified.
### Size constraints {#size-constraints}
Both `match_parent` and `wrap_content` size types support optional size constraints using `min_size` and `max_size` properties:
- `min_size`: Sets the minimum size of an element. The element will never be smaller than this value.
- `max_size`: Sets the maximum size of an element. The element will never be larger than this value.
These constraints are useful for ensuring elements maintain reasonable sizes while still being responsive to their content or parent container.
{% note info %}
If a constraint is specified where `min_size` exceeds `max_size`, the system will log an error and ignore the invalid constraints.
{% endnote %}
{% cut "Example: match_parent with size constraints" %}
```json
{
"type": "container",
"orientation": "vertical",
"items": [
{
"type": "text",
"text": "This text has constrained match_parent width",
"width": {
"type": "match_parent",
"min_size": {
"value": 100,
"unit": "dp"
},
"max_size": {
"value": 300,
"unit": "dp"
}
}
}
]
}
```
{% endcut %}
{% cut "Example: wrap_content with size constraints" %}
```json
{
"type": "text",
"text": "This text has constrained wrap_content height",
"height": {
"type": "wrap_content",
"min_size": {
"value": 50,
"unit": "dp"
},
"max_size": {
"value": 200,
"unit": "dp"
}
}
}
```
{% endcut %}
{% cut "View an interactive example" %}
{% endcut %}
### Size measurement units {#size-units}
{% note info "Note" %}
The `sp` measurement unit is used only in Android.
{% endnote %}
If the `fixed` type is used, the result depends on the measurement units:
- `dp` (density-independent pixels): A standard size measurement unit that is used by default and doesn't depend on the screen density.
- `sp` (scale-independent pixels): A measurement unit that depends on the text size factor on a phone.
If there is text in the element, specify the height in `sp`to make the block scale together with the text. If the text doesn't fit, use `dp`.
## Element borders {#margin}
To define the element borders, the `paddings` and `margins` parameters of the `container` element are used:
- `paddings`: The distance from the card content to its borders.
- `margins`: The distance from the card borders to other elements and container borders. It doesn't affect the size of the card itself.
## Alignment {#alignment}
The following parameters of the `container` element are used for horizontal and vertical alignment inside elements:
- `alignment_horizontal`: Horizontal alignment. It can have the `left`, `center`, and `right` values. Inside a horizontally aligned container, you can only align vertically, meaning apply `content_alignment_vertical` with the `left` (default), `center`, or `right` values.
- `alignment_vertical`: Vertical alignment. It can have the `top`, `center`, and `bottom` values. Inside a vertically aligned container, you can align horizontally, meaning apply `content_alignment_horizontal` with the `top` (default), `center`, or `bottom` values.
If you specify the alignment inside a container, for example, `content_alignment_horizontal`, the child elements inherit this parameter. If the values are specified in the child elements, they will be overridden.
### Scroll content alignment {#scroll-content-alignment}
The `gallery` element has a `scroll_content_alignment` property that controls how content aligns along the scroll axis:
- `start` — to the start
- `center` — to the center
- `end` — to the end
The default depends on the mode: `start` for galleries without paging scroll, `center` for galleries with paging scroll.
In a gallery **with paging scroll**, the property defines where items snap when paged. In a gallery **without paging scroll**, the property is used when scroll actions (for example, `scroll_to`) are invoked.
{% cut "Example: gallery without paging, center-aligned on scroll_to" %}
```json
{
"type": "gallery",
"scroll_content_alignment": "center",
"items": [
{"type": "container", "width": {"type": "fixed", "value": 200}, "height": {"type": "fixed", "value": 100}, "background": [{"type": "solid", "color": "#FFCC00"}]},
{"type": "container", "width": {"type": "fixed", "value": 200}, "height": {"type": "fixed", "value": 100}, "background": [{"type": "solid", "color": "#00CCFF"}]}
]
}
```
{% endcut %}
## Element Spacing {#spacing}
To control the spacing between elements in a container, use the following properties:
- `item_spacing` — spacing between elements in a container (in dp)
- `line_spacing` — spacing between lines in a container (in dp)
**Usage notes:**
- Both properties accept numeric values >= 0
- Default value: `0`
- If the `separator` property is set, `item_spacing` is ignored
- If the `line_separator` property is set, `line_spacing` is ignored
- If there's a conflict between properties, a warning is generated through the DivKit error system
{% note info %}
The `item_spacing` and `line_spacing` properties provide the ability to control spacing between elements without using separators (`separator` and `line_separator`).
{% endnote %}
{% cut "Example: using spacing properties" %}
```json
{
"type": "container",
"orientation": "vertical",
"item_spacing": 10,
"items": [
{
"type": "text",
"text": "First element"
},
{
"type": "text",
"text": "Second element"
},
{
"type": "text",
"text": "Third element"
}
]
}
```
{% endcut %}
{% cut "View an interactive example" %}
{% endcut %}
## Getting Element Sizes with Layout Provider {#layout-provider}
Layout provider allows you to capture the actual rendered size of an element and store it in [variables](https://divkit.tech/docs/en/concepts/variables.md). This is particularly useful for creating responsive layouts where one element's dimensions need to depend on another element's actual size.
{% note warning %}
Using layout provider causes additional layout passes, which can significantly impact rendering performance. Use this feature only when necessary and avoid creating long chains of dependencies between elements.
{% endnote %}
### How It Works
When you specify size values like `wrap_content` or `match_parent`, the final rendered size is calculated at runtime. Layout provider gives you access to these calculated dimensions by automatically updating specified variables with the element's width and height after layout.
The process works as follows:
1. Declare variables to store the element's dimensions
2. Add `layout_provider` to the element with variable names
3. After the element is laid out, the variables are automatically updated with its actual size
4. Use these variables in expressions for other elements' dimensions
### Parameters
The `layout_provider` property accepts an object with two optional parameters:
- `width_variable_name`: Name of the variable that will store the element's width (in dp)
- `height_variable_name`: Name of the variable that will store the element's height (in dp)
You can specify one or both parameters depending on your needs.
### Size Calculation
The size stored in variables represents the element's content area:
- **Includes**: The element's width and height as rendered, including paddings and borders
- **Excludes**: Margins are not included in the calculated size
### Tracking Element Count in Pager {#pager-item-count}
The pager component supports the `item_count_variable` property, which allows tracking the number of visible elements. This feature is currently available only on the Web platform.
**Parameters:**
- `item_count_variable`: Name of the variable that will store the number of visible elements in the pager
**Behavior:**
- The variable is automatically updated when the number of visible elements changes
- The value represents an integer (number of elements)
- Useful for creating count indicators or adaptive behavior based on element count
{% note warning %}
The `item_count_variable` property is currently supported only on the Web platform.
{% endnote %}
### Responsive Layout Example
A common use case is creating elements whose size depends on other elements. In this example, we create three blocks where each subsequent block's dimensions depend on the previous ones:
{% cut "View interactive example" %}
{% endcut %}
### Best Practices
1. **Initialize variables**: Always declare variables with initial values (typically 0) before using them with layout_provider
2. **Avoid circular dependencies**: Don't create situations where element A's size depends on element B, and element B's size depends on element A
3. **Use appropriate types**: Declare variables as `integer` type for dimension values
## 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)