Complete reference for grid size.

docs/styles/grid/grid_size.md

@@ -1 +1,76 @@
 # 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.
+
+## Syntax
+
+```sass
+grid-size: <INTEGER> [<INTEGER>];
+```
+
+The first integer specifies the number of columns and the second integer specifies the number of rows.
+
+## 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"
+
+    ```css 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"
+
+    ```css
+    --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
+```