mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
66 lines
1.2 KiB
Markdown
66 lines
1.2 KiB
Markdown
# 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
|
|
|
|
```sass
|
|
grid-columns: <SCALAR> . . .;
|
|
```
|
|
|
|
If there are more columns in the grid than scalars specified in `grid-columns`, they are reused cyclically.
|
|
|
|
Scalar units can be mixed.
|
|
|
|
--8<-- "docs/snippets/scalar_syntax.md"
|
|
|
|
## 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"
|
|
|
|
```css
|
|
--8<-- "docs/examples/styles/grid_columns.css"
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* 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
|
|
|
|
```py
|
|
grid.styles.grid_columns = "50%"
|
|
grid.styles.grid_columns = "1fr 2fr"
|
|
```
|