Merge pull request #701 from Textualize/docs-layout

Docs layout

docs/examples/styles/layout.css

@@ -0,0 +1,24 @@
+#vertical-layout {
+    layout: vertical;
+    background: darkmagenta;
+    height: auto;
+}
+
+#horizontal-layout {
+    layout: horizontal;
+    background: darkcyan;
+    height: auto;
+}
+
+#center-layout {
+    layout: center;
+    background: darkslateblue;
+    height: 7;
+}
+
+Static {
+    margin: 1;
+    width: 12;
+    color: black;
+    background: yellowgreen;
+}

docs/examples/styles/layout.py

@@ -0,0 +1,27 @@
+from textual import layout
+from textual.app import App
+from textual.widget import Widget
+from textual.widgets import Static
+
+
+class LayoutApp(App):
+    def compose(self):
+        yield layout.Container(
+            Static("Layout"),
+            Static("Is"),
+            Static("Vertical"),
+            id="vertical-layout",
+        )
+        yield layout.Container(
+            Static("Layout"),
+            Static("Is"),
+            Static("Horizontal"),
+            id="horizontal-layout",
+        )
+        yield layout.Container(
+            Static("Center"),
+            id="center-layout",
+        )
+
+
+app = LayoutApp(css_path="layout.css")

docs/styles/layout.md

@@ -0,0 +1,50 @@
+# Layout
+
+The `layout` property defines how a widget arranges its children.
+
+## Syntax
+
+```
+layout: [vertical|horizontal|center];
+```
+
+### Values
+
+| Value                | Description                                                                   |
+|----------------------|-------------------------------------------------------------------------------|
+| `vertical` (default) | Child widgets will be arranged along the vertical axis, from top to bottom.   |
+| `horizontal`         | Child widgets will be arranged along the horizontal axis, from left to right. |
+| `center`             | A single child widget will be placed in the center.                           |
+
+## Example
+
+Note how the `layout` property affects the arrangement of widgets in the example below.
+
+=== "layout.py"
+
+    ```python
+    --8<-- "docs/examples/styles/layout.py"
+    ```
+
+=== "layout.css"
+
+    ```sass
+    --8<-- "docs/examples/styles/layout.css"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/layout.py"}
+    ```
+
+## CSS
+
+```sass
+layout: horizontal;
+```
+
+## Python
+
+```python
+widget.layout = "horizontal"
+```

mkdocs.yml

@@ -44,6 +44,7 @@ nav:
     - "styles/content_align.md"
     - "styles/display.md"
     - "styles/height.md"
+    - "styles/layout.md"
     - "styles/margin.md"
     - "styles/max_height.md"
     - "styles/max_width.md"