mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Update grid references.
[skip ci]
This commit is contained in:
Rodrigo Girão Serrão
@@ -8,9 +8,15 @@ The `column-span` style specifies how many rows a widget will span in a grid lay
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
column-span: <INTEGER>
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
column-span: <a href="../css_types/integer.md"><integer></a>;
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
The style `column-span` accepts a single non-negative [`<integer>`](../../css_types/integer.md) that quantifies how many columns the given widget spans.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/integer.md"
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -8,13 +8,16 @@ The `grid-columns` style allows to define the width of the columns of the grid.
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
grid-columns: <SCALAR> . . .;
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
grid-columns: <a href="../css_types/scalar.md"><scalar></a>+;
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
The style `grid-columns` takes one or more [`<scalar>`](../../css_types/scalar.md) that specify the length of the columns of the grid.
|
||||
|
||||
If there are more columns in the grid than scalars specified in `grid-columns`, they are reused cyclically.
|
||||
If the number of [`<scalar>`](../../css_types/scalar.md) is in excess, the excess is ignored.
|
||||
|
||||
Scalar units can be mixed.
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/scalar.md"
|
||||
|
||||
|
||||
@@ -12,12 +12,15 @@ No spacing is added between the edges of cells and the edges of the container.
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
grid-gutter: <SCALAR> [<SCALAR>];
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
grid-gutter: <a href="../css_types/scalar.md"><scalar></a> [<a href="../css_types/scalar.md"><scalar></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
If only one scalar is supplied, it sets the horizontal and vertical gutter.
|
||||
If two scalars are supplied, they set the vertical and horizontal gutters, respectively.
|
||||
The style `grid-gutter` takes one or two [`<scalar>`](../../css_types/scalar.md) that set the length of the gutter along the vertical and horizontal axes.
|
||||
If only one [`<scalar>`](../../css_types/scalar.md) 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"
|
||||
|
||||
|
||||
@@ -8,13 +8,16 @@ The `grid-rows` style allows to define the height of the rows of the grid.
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
grid-rows: <SCALAR> . . .;
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
grid-rows: <a href="../css_types/scalar.md"><scalar></a>+;
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
The style `grid-rows` takes one or more [`<scalar>`](../../css_types/scalar.md) that specify the length of the rows of the grid.
|
||||
|
||||
If there are more rows in the grid than scalars specified in `grid-rows`, they are reused cyclically.
|
||||
If the number of [`<scalar>`](../../css_types/scalar.md) is in excess, the excess is ignored.
|
||||
|
||||
Scalar units can be mixed.
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/scalar.md"
|
||||
|
||||
|
||||
@@ -10,11 +10,17 @@ The number of rows can be left unspecified and it will be computed automatically
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
grid-size: <INTEGER> [<INTEGER>];
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
grid-size: <a href="../css_types/integer.md"><integer></a> [<a href="../css_types/integer.md"><integer></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
The first integer specifies the number of columns and the second integer specifies the number of rows.
|
||||
The style `grid-size` takes one or two non-negative [`<integer>`](../../css_types/integer.md).
|
||||
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
|
||||
|
||||
|
||||
@@ -6,24 +6,43 @@ For an in-depth look at the grid layout, visit the grid [guide](../guide/layout.
|
||||
|
||||
| Property | Description |
|
||||
|----------------|------------------------------------------------|
|
||||
| [`grid-size`](./grid_size.md) | Number of columns and rows in the grid layout. |
|
||||
| [`grid-rows`](./grid_rows.md) | Height of grid rows. |
|
||||
| [`column-span`](./column_span.md) | Number of columns a cell spans. |
|
||||
| [`grid-columns`](./grid_columns.md) | Width of grid columns. |
|
||||
| [`grid-gutter`](./grid_gutter.md) | Spacing between grid cells. |
|
||||
| [`grid-rows`](./grid_rows.md) | Height of grid rows. |
|
||||
| [`grid-size`](./grid_size.md) | Number of columns and rows in the grid layout. |
|
||||
| [`row-span`](./row_span.md) | Number of rows a cell spans. |
|
||||
| [`column-span`](./column_span.md) | Number of columns a cell spans. |
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
grid-size: <INTEGER> [<INTEGER>];
|
||||
/* columns first, then rows */
|
||||
grid-rows: <SCALAR> . . .;
|
||||
grid-columns: <SCALAR> . . .;
|
||||
grid-gutter: <SCALAR>;
|
||||
row-span: <INTEGER>;
|
||||
column-span: <INTEGER>;
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
column-span: <a href="../css_types/integer.md"><integer></a>;
|
||||
|
||||
grid-columns: <a href="../css_types/scalar.md"><scalar></a>+;
|
||||
|
||||
grid-gutter: <a href="../css_types/scalar.md"><scalar></a> [<a href="../css_types/scalar.md"><scalar></a>];
|
||||
|
||||
grid-rows: <a href="../css_types/scalar.md"><scalar></a>+;
|
||||
|
||||
grid-size: <a href="../css_types/integer.md"><integer></a> [<a href="../css_types/integer.md"><integer></a>];
|
||||
|
||||
row-span: <a href="../css_types/integer.md"><integer></a>;
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
The styles `column-span` and `row-span` accept a single non-negative [`<integer>`](../../css_types/integer.md) while the style `grid-size` accepts one or two non-negative [`<integer>`](../../css_types/integer.md).
|
||||
|
||||
The style `grid-gutter` accepts one or two [`<scalar>`](../../css_types/scalar.md) while the styles `grid-columns` and `grid-rows` accept one or more.
|
||||
|
||||
|
||||
### Values
|
||||
|
||||
#### <integer>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/integer.md"
|
||||
|
||||
#### <scalar>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/scalar.md"
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -8,9 +8,15 @@ The `row-span` style specifies how many rows a widget will span in a grid layout
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
row-span: <INTEGER>
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
row-span: <a href="../css_types/integer.md"><integer></a>;
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
The style `row-span` accepts a single non-negative [`<integer>`](../../css_types/integer.md) that quantifies how many rows the given widget spans.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/integer.md"
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
Reference in New Issue
Block a user