Add example to grid styles docs, rename it

docs/styles/grid.md

@@ -1,4 +1,4 @@
-# Grid properties
+# Grid
 
 There are a number of properties relating to the Textual `grid` layout.
 
@@ -16,12 +16,39 @@ For an in-depth look at the grid layout, visit the grid [guide](../guide/layout.
 ## Syntax
 
 ```sass
-grid-size: <INTEGER> [<INTEGER>];  /* columns first, then rows */
-grid-rows: <SCALAR> ...;
-grid-columns: <SCALAR> ...;
+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
+
+    Grid properties will only work when the layout of the widget is set to `grid`.