Add complete alignment grid screenshot.

docs/examples/styles/align_all.css

@@ -0,0 +1,53 @@
+#left-top {
+    /* align: left top; this is the default value and is implied. */
+}
+
+#center-top {
+    align: center top;
+}
+
+#right-top {
+    align: right top;
+}
+
+#left-middle {
+    align: left middle;
+}
+
+#center-middle {
+    align: center middle;
+}
+
+#right-middle {
+    align: right middle;
+}
+
+#left-bottom {
+    align: left bottom;
+}
+
+#center-bottom {
+    align: center bottom;
+}
+
+#right-bottom {
+    align: right bottom;
+}
+
+Screen {
+    layout: grid;
+    grid-size: 3 3;
+    grid-gutter: 1;
+}
+
+Container {
+    background: $boost;
+    border: solid gray;
+    height: 100%;
+}
+
+Label {
+    width: auto;
+    height: 1;
+    background: $accent;
+}

docs/examples/styles/align_all.py

@@ -0,0 +1,20 @@
+from textual.app import App, ComposeResult
+from textual.containers import Container
+from textual.widgets import Label
+
+
+class AlignAllApp(App):
+    """App that illustrates all alignments."""
+
+    CSS_PATH = "align_all.css"
+
+    def compose(self) -> ComposeResult:
+        yield Container(Label("left top"), id="left-top")
+        yield Container(Label("center top"), id="center-top")
+        yield Container(Label("right top"), id="right-top")
+        yield Container(Label("left middle"), id="left-middle")
+        yield Container(Label("center middle"), id="center-middle")
+        yield Container(Label("right middle"), id="right-middle")
+        yield Container(Label("left bottom"), id="left-bottom")
+        yield Container(Label("center bottom"), id="center-bottom")
+        yield Container(Label("right bottom"), id="right-bottom")