Complete reference for grid-rows.

This commit is contained in:
Rodrigo Girão Serrão
2022-12-19 18:02:40 +00:00
parent d1af311e3b
commit d0e3734f30

View File

@@ -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"
```