mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
196d430582
Textual CSS is better highlighted in SASS code blocks because the SASS parser seems to be more lenient.
87 lines
2.1 KiB
Markdown
87 lines
2.1 KiB
Markdown
# 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: <a href="../../css_types/integer"><integer></a> [<a href="../../css_types/integer"><integer></a>];
|
||
--8<-- "docs/snippets/syntax_block_end.md"
|
||
|
||
The style `grid-size` takes one or two non-negative [`<integer>`](../../../css_types/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.
|
||
|
||
### Values
|
||
|
||
--8<-- "docs/snippets/type_syntax/integer.md"
|
||
|
||
## 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
|
||
|
||
```sass
|
||
/* 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:
|
||
|
||
```py
|
||
widget.styles.grid_size_rows = 3
|
||
widget.styles.grid_size_columns = 6
|
||
```
|