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.1 KiB
Grid-size
The grid-size style sets the number of columns and rows in a grid layout.
The number of rows can be left unspecified and it will be computed automatically.
!!! note
This style only affects widgets with `layout: grid`.
Syntax
--8<-- "docs/snippets/syntax_block_start.md" grid-size: <integer> [<integer>]; --8<-- "docs/snippets/syntax_block_end.md"
The style grid-size takes one or two non-negative <integer>.
The first defines how many columns there are in the grid.
If present, the second one sets the number of rows – regardless of the number of children of the grid –, otherwise the number of rows is computed automatically.
Examples
In the first example, we create a grid with 2 columns and 5 rows, regardless of the fact that we do not have enough labels to fill in the whole grid:
=== "Output"
```{.textual path="docs/examples/styles/grid_size_both.py"}
```
=== "grid_size_both.py"
```py
--8<-- "docs/examples/styles/grid_size_both.py"
```
=== "grid_size_both.css"
```sass hl_lines="2"
--8<-- "docs/examples/styles/grid_size_both.css"
```
1. Create a grid with 2 columns and 4 rows.
In the second example, we create a grid with 2 columns and however many rows are needed to display all of the grid children:
=== "Output"
```{.textual path="docs/examples/styles/grid_size_columns.py"}
```
=== "grid_size_columns.py"
```py
--8<-- "docs/examples/styles/grid_size_columns.py"
```
=== "grid_size_columns.css"
```sass
--8<-- "docs/examples/styles/grid_size_columns.css"
```
1. Create a grid with 2 columns and however many rows.
CSS
/* Grid with 3 rows and 5 columns */
grid-size: 3 5;
/* Grid with 4 columns and as many rows as needed */
grid-size: 4;
Python
To programmatically change the grid size, the number of rows and columns must be specified separately:
widget.styles.grid_size_rows = 3
widget.styles.grid_size_columns = 6