da9a481f1c
Supposedly, this had been done in an earlier commit for all styles. Apparently, I forgot to open styles references that were one level deeper in the directory, so the pages about grid, links, and scrollbar colors still included the css types values directly in their reference pages.
2.3 KiB
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-gutter: <scalar> [<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.
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`.