1.6 KiB
1.6 KiB
Layout
The layout property defines how a widget arranges its children.
Syntax
--8<-- "docs/snippets/syntax_block_start.md" layout: grid | horizontal | vertical; --8<-- "docs/snippets/syntax_block_end.md"
The layout style takes an option that defines how child widgets will be arranged, as per the table shown below.
Values
| Value | Description |
|---|---|
grid |
Child widgets will be arranged in a grid. |
horizontal |
Child widgets will be arranged along the horizontal axis, from left to right. |
vertical (default) |
Child widgets will be arranged along the vertical axis, from top to bottom. |
See the layout guide for more information.
Example
Note how the layout property affects the arrangement of widgets in the example below.
To learn more about the grid layout, you can see the layout guide or the grid reference.
=== "Output"
```{.textual path="docs/examples/styles/layout.py"}
```
=== "layout.py"
```python
--8<-- "docs/examples/styles/layout.py"
```
=== "layout.css"
```sass hl_lines="2 8"
--8<-- "docs/examples/styles/layout.css"
```
CSS
layout: horizontal;
Python
widget.styles.layout = "horizontal"