mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
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.
1.5 KiB
1.5 KiB
Grid-columns
The grid-columns style allows to define the width of the columns of the grid.
!!! note
This style only affects widgets with `layout: grid`.
Syntax
--8<-- "docs/snippets/syntax_block_start.md" grid-columns: <scalar>+; --8<-- "docs/snippets/syntax_block_end.md"
The style grid-columns takes one or more <scalar> that specify the length of the columns of the grid.
If there are more columns in the grid than scalars specified in grid-columns, they are reused cyclically.
If the number of <scalar> is in excess, the excess is ignored.
Example
The example below shows a grid with 10 labels laid out in a grid with 2 rows and 5 columns.
We set grid-columns: 1fr 16 2fr.
Because there are more rows than scalars in the style rule, the scalars will be reused:
- columns 1 and 4 have width
1fr; - columns 2 and 5 have width
16; and - column 3 has width
2fr.
=== "Output"
```{.textual path="docs/examples/styles/grid_columns.py"}
```
=== "grid_columns.py"
```py
--8<-- "docs/examples/styles/grid_columns.py"
```
=== "grid_columns.css"
```sass
--8<-- "docs/examples/styles/grid_columns.css"
```
CSS
/* Set all columns to have 50% width */
grid-columns: 50%;
/* Every other column is twice as wide as the first one */
grid-columns: 1fr 2fr;
Python
grid.styles.grid_columns = "50%"
grid.styles.grid_columns = "1fr 2fr"