mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Complete reference for grid-rows.
This commit is contained in:
@@ -1 +1,61 @@
|
||||
# Grid-rows
|
||||
|
||||
The `grid-rows` style allows to define the height of the rows of the grid.
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
grid-rows: <SCALAR> . . .;
|
||||
```
|
||||
|
||||
If there are more rows in the grid than scalars specified in `grid-rows`, they are reused cyclically.
|
||||
|
||||
Scalar units can be mixed.
|
||||
|
||||
--8<-- "docs/styles/snippets/scalar_syntax.md"
|
||||
|
||||
## Example
|
||||
|
||||
The example below shows a grid with 10 labels laid out in a grid with 5 rows and 2 columns.
|
||||
|
||||
We set `grid-rows: 1fr 6 25%`.
|
||||
Because there are more rows than scalars in the style rule, the scalars will be reused:
|
||||
|
||||
- rows 1 and 4 have height `1fr`;
|
||||
- rows 2 and 5 have height `6`; and
|
||||
- row 3 has height `25%`.
|
||||
|
||||
|
||||
=== "Output"
|
||||
|
||||
```{.textual path="docs/examples/styles/grid_rows.py"}
|
||||
```
|
||||
|
||||
=== "grid_rows.py"
|
||||
|
||||
```py
|
||||
--8<-- "docs/examples/styles/grid_rows.py"
|
||||
```
|
||||
|
||||
=== "grid_rows.css"
|
||||
|
||||
```css
|
||||
--8<-- "docs/examples/styles/grid_rows.css"
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```sass
|
||||
/* Set all rows to have 50% height */
|
||||
grid-rows: 50%;
|
||||
|
||||
/* Every other row is twice as tall as the first one */
|
||||
grid-rows: 1fr 2fr;
|
||||
```
|
||||
|
||||
### Python
|
||||
|
||||
```py
|
||||
grid.styles.grid_rows = "50%"
|
||||
grid.styles.grid_rows = "1fr 2fr"
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user