diff --git a/docs/styles/grid/column_span.md b/docs/styles/grid/column_span.md index 2ac8d808f..e86e5dcfe 100644 --- a/docs/styles/grid/column_span.md +++ b/docs/styles/grid/column_span.md @@ -8,9 +8,15 @@ The `column-span` style specifies how many rows a widget will span in a grid lay ## Syntax -```sass -column-span: -``` +--8<-- "docs/snippets/syntax_block_start.md" +column-span: <integer>; +--8<-- "docs/snippets/syntax_block_end.md" + +The style `column-span` accepts a single non-negative [``](../../css_types/integer.md) that quantifies how many columns the given widget spans. + +### Values + +--8<-- "docs/snippets/type_syntax/integer.md" ## Example diff --git a/docs/styles/grid/grid_columns.md b/docs/styles/grid/grid_columns.md index cf60a9d9c..78d57371f 100644 --- a/docs/styles/grid/grid_columns.md +++ b/docs/styles/grid/grid_columns.md @@ -8,13 +8,16 @@ The `grid-columns` style allows to define the width of the columns of the grid. ## Syntax -```sass -grid-columns: . . .; -``` +--8<-- "docs/snippets/syntax_block_start.md" +grid-columns: <scalar>+; +--8<-- "docs/snippets/syntax_block_end.md" + +The style `grid-columns` takes one or more [``](../../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 [``](../../css_types/scalar.md) is in excess, the excess is ignored. -Scalar units can be mixed. +### Values --8<-- "docs/snippets/type_syntax/scalar.md" diff --git a/docs/styles/grid/grid_gutter.md b/docs/styles/grid/grid_gutter.md index ba856ee7b..23d3c113f 100644 --- a/docs/styles/grid/grid_gutter.md +++ b/docs/styles/grid/grid_gutter.md @@ -12,12 +12,15 @@ No spacing is added between the edges of cells and the edges of the container. ## Syntax -```sass -grid-gutter: []; -``` +--8<-- "docs/snippets/syntax_block_start.md" +grid-gutter: <scalar> [<scalar>]; +--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 [``](../../css_types/scalar.md) that set the length of the gutter along the vertical and horizontal axes. +If only one [``](../../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" diff --git a/docs/styles/grid/grid_rows.md b/docs/styles/grid/grid_rows.md index 8296047db..b3945b0bb 100644 --- a/docs/styles/grid/grid_rows.md +++ b/docs/styles/grid/grid_rows.md @@ -8,13 +8,16 @@ The `grid-rows` style allows to define the height of the rows of the grid. ## Syntax -```sass -grid-rows: . . .; -``` +--8<-- "docs/snippets/syntax_block_start.md" +grid-rows: <scalar>+; +--8<-- "docs/snippets/syntax_block_end.md" + +The style `grid-rows` takes one or more [``](../../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 [``](../../css_types/scalar.md) is in excess, the excess is ignored. -Scalar units can be mixed. +### Values --8<-- "docs/snippets/type_syntax/scalar.md" diff --git a/docs/styles/grid/grid_size.md b/docs/styles/grid/grid_size.md index b75e862e7..970b96e5b 100644 --- a/docs/styles/grid/grid_size.md +++ b/docs/styles/grid/grid_size.md @@ -10,11 +10,17 @@ The number of rows can be left unspecified and it will be computed automatically ## Syntax -```sass -grid-size: []; -``` +--8<-- "docs/snippets/syntax_block_start.md" +grid-size: <integer> [<integer>]; +--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 [``](../../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 diff --git a/docs/styles/grid/index.md b/docs/styles/grid/index.md index 16c51ae3c..7e3adf39c 100644 --- a/docs/styles/grid/index.md +++ b/docs/styles/grid/index.md @@ -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: []; -/* columns first, then rows */ -grid-rows: . . .; -grid-columns: . . .; -grid-gutter: ; -row-span: ; -column-span: ; -``` +--8<-- "docs/snippets/syntax_block_start.md" +column-span: <integer>; + +grid-columns: <scalar>+; + +grid-gutter: <scalar> [<scalar>]; + +grid-rows: <scalar>+; + +grid-size: <integer> [<integer>]; + +row-span: <integer>; +--8<-- "docs/snippets/syntax_block_end.md" + +The styles `column-span` and `row-span` accept a single non-negative [``](../../css_types/integer.md) while the style `grid-size` accepts one or two non-negative [``](../../css_types/integer.md). + +The style `grid-gutter` accepts one or two [``](../../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 diff --git a/docs/styles/grid/row_span.md b/docs/styles/grid/row_span.md index ce3565528..ff1258302 100644 --- a/docs/styles/grid/row_span.md +++ b/docs/styles/grid/row_span.md @@ -8,9 +8,15 @@ The `row-span` style specifies how many rows a widget will span in a grid layout ## Syntax -```sass -row-span: -``` +--8<-- "docs/snippets/syntax_block_start.md" +row-span: <integer>; +--8<-- "docs/snippets/syntax_block_end.md" + +The style `row-span` accepts a single non-negative [``](../../css_types/integer.md) that quantifies how many rows the given widget spans. + +### Values + +--8<-- "docs/snippets/type_syntax/integer.md" ## Example