Skip to content

Grid

There are a number of styles relating to the Textual grid layout.

For an in-depth look at the grid layout, visit the grid guide.

Property Description
column-span Number of columns a cell spans.
grid-columns Width of grid columns.
grid-gutter Spacing between grid cells.
grid-rows Height of grid rows.
grid-size Number of columns and rows in the grid layout.
row-span Number of rows a cell spans.

Syntax

column-span: <integer>;

grid-columns: <scalar>+;

grid-gutter: <scalar> [<scalar>];

grid-rows: <scalar>+;

grid-size: <integer> [<integer>];

row-span: <integer>;

Visit each style's reference page to learn more about how the values are used.

Example

The example below shows all the styles above in action. The grid-size: 3 4; declaration sets the grid to 3 columns and 4 rows. The first cell of the grid, tinted magenta, shows a cell spanning multiple rows and columns. The spacing between grid cells is defined by the grid-gutter style.

GridApp Grid cell 1Grid cell 2 row-span: 3; column-span: 2; Grid cell 3 Grid cell 4 Grid cell 5Grid cell 6Grid cell 7 

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


class GridApp(App):
    CSS_PATH = "grid.tcss"

    def compose(self):
        yield Static("Grid cell 1\n\nrow-span: 3;\ncolumn-span: 2;", id="static1")
        yield Static("Grid cell 2", id="static2")
        yield Static("Grid cell 3", id="static3")
        yield Static("Grid cell 4", id="static4")
        yield Static("Grid cell 5", id="static5")
        yield Static("Grid cell 6", id="static6")
        yield Static("Grid cell 7", id="static7")


if __name__ == "__main__":
    app = GridApp()
    app.run()

Screen {
    layout: grid;
    grid-size: 3 4;
    grid-rows: 1fr;
    grid-columns: 1fr;
    grid-gutter: 1;
}

Static {
    color: auto;
    background: lightblue;
    height: 100%;
    padding: 1 2;
}

#static1 {
    tint: magenta 40%;
    row-span: 3;
    column-span: 2;
}

Warning

The styles listed on this page will only work when the layout is grid.

See also