Grid

There are a number of properties 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

--8<-- "docs/snippets/syntax_block_start.md" column-span: <integer>;

grid-columns: <scalar>+;

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

grid-rows: <scalar>+;

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

row-span: <integer>; --8<-- "docs/snippets/syntax_block_end.md"

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

Values

<integer>

--8<-- "docs/snippets/type_syntax/integer.md"

<scalar>

--8<-- "docs/snippets/type_syntax/scalar.md"

Example

The example below shows all the properties 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 because of the grid-gutter declaration.

=== "Output"

```{.textual path="docs/examples/styles/grid.py"}
```

=== "grid.py"

```python
--8<-- "docs/examples/styles/grid.py"
```

=== "grid.css"

```sass
--8<-- "docs/examples/styles/grid.css"
```

!!! warning

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

2.4 KiB Raw Blame History