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.
68 lines
1.9 KiB
Markdown
68 lines
1.9 KiB
Markdown
# Grid-gutter
|
|
|
|
The `grid-gutter` style sets the size of the gutter in the grid layout.
|
|
That is, it sets the space between adjacent cells in the grid.
|
|
|
|
Gutter is only applied _between_ the edges of cells.
|
|
No spacing is added between the edges of cells and the edges of the container.
|
|
|
|
!!! note
|
|
|
|
This style only affects widgets with `layout: grid`.
|
|
|
|
## Syntax
|
|
|
|
--8<-- "docs/snippets/syntax_block_start.md"
|
|
grid-gutter: <a href="../../css_types/scalar"><scalar></a> [<a href="../../css_types/scalar"><scalar></a>];
|
|
--8<-- "docs/snippets/syntax_block_end.md"
|
|
|
|
The style `grid-gutter` takes one or two [`<scalar>`](../../../css_types/scalar) that set the length of the gutter along the vertical and horizontal axes.
|
|
If only one [`<scalar>`](../../../css_types/scalar) is supplied, it sets the vertical and horizontal gutters.
|
|
If two are supplied, they set the vertical and horizontal gutters, respectively.
|
|
|
|
### Values
|
|
|
|
--8<-- "docs/snippets/type_syntax/scalar.md"
|
|
|
|
## Example
|
|
|
|
The example below employs a common trick to apply visually consistent spacing around all grid cells.
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/grid_gutter.py"}
|
|
```
|
|
|
|
=== "grid_gutter.py"
|
|
|
|
```py
|
|
--8<-- "docs/examples/styles/grid_gutter.py"
|
|
```
|
|
|
|
=== "grid_gutter.css"
|
|
|
|
```sass
|
|
--8<-- "docs/examples/styles/grid_gutter.css"
|
|
```
|
|
|
|
1. We set the horizontal gutter to be double the vertical gutter because terminal cells are typically two times taller than they are wide. Thus, the result shows visually consistent spacing around grid cells.
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* Set vertical and horizontal gutters to be the same */
|
|
grid-gutter: 5%;
|
|
|
|
/* Set vertical and horizontal gutters separately */
|
|
grid-gutter: 1 2;
|
|
```
|
|
|
|
## Python
|
|
|
|
Vertical and horizontal gutters correspond to different Python properties, so they must be set separately:
|
|
|
|
```py
|
|
widget.styles.grid_gutter_vertical = "1"
|
|
widget.styles.grid_gutter_horizontal = "2"
|
|
```
|