Skip to content

Layout

The layout property defines how a widget arranges its children.

See layout guide for more information.

Syntax

layout: [grid|horizontal|vertical];

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.

Example

Note how the layout property affects the arrangement of widgets in the example below.

from textual.app import App
from textual.containers import Container
from textual.widgets import Static


class LayoutApp(App):
    def compose(self):
        yield Container(
            Static("Layout"),
            Static("Is"),
            Static("Vertical"),
            id="vertical-layout",
        )
        yield Container(
            Static("Layout"),
            Static("Is"),
            Static("Horizontal"),
            id="horizontal-layout",
        )


app = LayoutApp(css_path="layout.css")
#vertical-layout {
    layout: vertical;
    background: darkmagenta;
    height: auto;
}

#horizontal-layout {
    layout: horizontal;
    background: darkcyan;
    height: auto;
}

Static {
    margin: 1;
    width: 12;
    color: black;
    background: yellowgreen;
}

LayoutApp Layout Is Vertical LayoutIsHorizontal

CSS

layout: horizontal;

Python

widget.layout = "horizontal"