docs/styles/grid/index.md
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. |
--8<-- "docs/snippets/syntax_block_start.md" <a href="./column_span/">column-span</a>: <a href="../../../css_types/integer"><integer></a>;
<a href="./grid_columns/">grid-columns</a>: <a href="../../../css_types/scalar"><scalar></a>+;
<a href="./grid_gutter/">grid-gutter</a>: <a href="../../../css_types/scalar"><scalar></a> [<a href="../../../css_types/scalar"><scalar></a>];
<a href="./grid_rows/">grid-rows</a>: <a href="../../../css_types/scalar"><scalar></a>+;
<a href="./grid_size/">grid-size</a>: <a href="../../../css_types/integer"><integer></a> [<a href="../../../css_types/integer"><integer></a>];
<a href="./row_span/">row-span</a>: <a href="../../../css_types/integer"><integer></a>; --8<-- "docs/snippets/syntax_block_end.md"
Visit each style's reference page to learn more about how the values are used.
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.
=== "Output"
```{.textual path="docs/examples/styles/grid.py"}
```
=== "grid.py"
```python
--8<-- "docs/examples/styles/grid.py"
```
=== "grid.tcss"
```css
--8<-- "docs/examples/styles/grid.tcss"
```
!!! warning
The styles listed on this page will only work when the layout is `grid`.