Add Containers reference page and link from reference index

docs / reference / containers /index.md

@@ -0,0 +1,73 @@
+# Containers
+
+Containers are layout widgets used to arrange other widgets.
+
+---
+
+## Container
+
+A simple container widget with vertical layout.
+
+### Default Behavior
+
+- Expands to fill available width and height.
+- Uses vertical layout.
+- Hides overflow on both axes.
+
+### Default CSS
+
+```css
+Container {
+    width: 1fr;
+    height: 1fr;
+    layout: vertical;
+    overflow: hidden hidden;
+}
+```
+--------
+
+## Vertical
+An expanding container with vertical layout and no scrollbars.
+
+### Default Behavior
+Expands to fill available space.
+
+Arranges children top-to-bottom.
+
+No scrollbars.
+
+### Default CSS
+
+```css
+Vertical {
+    width: 1fr;
+    height: 1fr;
+    layout: vertical;
+    overflow: hidden hidden;
+}
+```
+----
+
+## Horizontal
+An expanding container with horizontal layout and no scrollbars.
+
+### Default Behavior
+Expands to fill available space.
+
+Arranges children left-to-right.
+
+No scrollbars.
+
+Default CSS
+
+```css
+Horizontal {
+    width: 1fr;
+    height: 1fr;
+    layout: horizontal;
+    overflow: hidden hidden;
+}
+```
+----
+
+---

docs/reference/containers/index.md

@@ -0,0 +1,72 @@
+# Containers
+
+Containers are layout widgets used to arrange other widgets.
+
+---
+
+## Container
+
+A simple container widget with vertical layout.
+
+### Default Behavior
+
+- Expands to fill available width and height.
+- Uses vertical layout.
+- Hides overflow on both axes.
+
+### Default CSS
+
+```css
+Container {
+    width: 1fr;
+    height: 1fr;
+    layout: vertical;
+    overflow: hidden hidden;
+}
+```
+
+----
+
+## Vertical
+An expanding container with vertical layout and no scrollbars.
+
+Default Behavior
+Expands to fill available space.
+
+Arranges children top-to-bottom.
+
+No scrollbars.
+
+### Default CSS
+
+```css
+Vertical {
+    width: 1fr;
+    height: 1fr;
+    layout: vertical;
+    overflow: hidden hidden;
+}
+```
+
+-----
+
+## Horizontal
+An expanding container with horizontal layout and no scrollbars.
+
+Default Behavior
+Expands to fill available space.
+
+Arranges children left-to-right.
+
+No scrollbars.
+
+### Default CSS
+
+```css
+Horizontal {
+    width: 1fr;
+    height: 1fr;
+    layout: horizontal;
+    overflow: hidden hidden;
+}
+```

docs/reference/index.md

@@ -38,6 +38,15 @@ Welcome to the Textual Reference.
     How to use the many widgets builtin to Textual.
 
     :octicons-arrow-right-24: [Widgets Reference](../widgets/index.md)
+
+
+-   :octicons-book-16:{ .lg .middle } __Containers__
+
+    ---
+
+    Layout and alignment containers for arranging widgets.
+
+    :octicons-arrow-right-24: [Containers Reference](containers/index.md)