Merge pull request #854 from Textualize/styles-css-property-fixes-updates

Fix issues with `Styles.css`, update "Grid" styles doc page

docs/examples/styles/grid.css

@@ -0,0 +1,20 @@
+Screen {
+    layout: grid;
+    grid-size: 3 4;
+    grid-rows: 1fr;
+    grid-columns: 1fr;
+    grid-gutter: 1;
+}
+
+Static {
+    color: auto;
+    background: lightblue;
+    height: 100%;
+    padding: 1 2;
+}
+
+#static1 {
+    tint: magenta 40%;
+    row-span: 3;
+    column-span: 2;
+}

docs/examples/styles/grid.py

@@ -0,0 +1,18 @@
+from textual.app import App
+from textual.widgets import Static
+
+
+class GridApp(App):
+    def compose(self):
+        yield Static("Grid cell 1\n\nrow-span: 3;\ncolumn-span: 2;", id="static1")
+        yield Static("Grid cell 2", id="static2")
+        yield Static("Grid cell 3", id="static3")
+        yield Static("Grid cell 4", id="static4")
+        yield Static("Grid cell 5", id="static5")
+        yield Static("Grid cell 6", id="static6")
+        yield Static("Grid cell 7", id="static7")
+
+
+app = GridApp(css_path="grid.css")
+if __name__ == "__main__":
+    app.run()

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
+
+    The properties listed on this page will only work when the layout is `grid`.