Split grid reference into subpages.

docs/styles/grid/column_span.md

@@ -0,0 +1 @@
+# Column-span

docs/styles/grid/grid_columns.md

@@ -0,0 +1 @@
+# Grid-columns

docs/styles/grid/grid_gutter.md

@@ -0,0 +1 @@
+# Grid-gutter

docs/styles/grid/grid_rows.md

@@ -0,0 +1 @@
+# Grid-rows

docs/styles/grid/grid_size.md

@@ -0,0 +1 @@
+# Grid-size

docs/styles/grid/index.md

@@ -0,0 +1,54 @@
+# Grid
+
+There are a number of properties relating to the Textual `grid` layout.
+
+For an in-depth look at the grid layout, visit the grid [guide](../guide/layout.md#grid).
+
+| Property       | Description                                    |
+|----------------|------------------------------------------------|
+| `grid-size`    | Number of columns and rows in the grid layout. |
+| `grid-rows`    | Height of grid rows.                           |
+| `grid-columns` | Width of grid columns.                         |
+| `grid-gutter`  | Spacing between grid cells.                    |
+| `row-span`     | Number of rows a cell spans.                   |
+| `column-span`  | 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>;
+```
+
+## Example
+
+The example below shows all the properties above in action.
+The `grid-size: 3 4;` declaration sets the grid to 3 columns and 4 rows.
+The first cell of the grid, tinted magenta, shows a cell spanning multiple rows and columns.
+The spacing between grid cells is because of the `grid-gutter` declaration.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/grid.py"}
+    ```
+
+=== "grid.py"
+
+    ```python
+    --8<-- "docs/examples/styles/grid.py"
+    ```
+
+=== "grid.css"
+
+    ```sass
+    --8<-- "docs/examples/styles/grid.css"
+    ```
+
+!!! warning
+
+    The properties listed on this page will only work when the layout is `grid`.

docs/styles/grid/row_span.md

@@ -0,0 +1 @@
+# Row-span