diff --git a/docs/examples/styles/width_comparison.css b/docs/examples/styles/width_comparison.css
new file mode 100644
index 000000000..2e2f0512d
--- /dev/null
+++ b/docs/examples/styles/width_comparison.css
@@ -0,0 +1,39 @@
+#cells {
+    width: 9;      /* (1)! */
+}
+#percent {
+    width: 12.5%;  /* (2)! */
+}
+#w {
+    width: 10w;    /* (3)! */
+}
+#h {
+    width: 25h;    /* (4)! */
+}
+#vw {
+    width: 15vw;   /* (5)! */
+}
+#vh {
+    width: 25vh;   /* (6)! */
+}
+#auto {
+    width: auto;   /* (7)! */
+}
+#fr1 {
+    width: 1fr;    /* (8)! */
+}
+#fr3 {
+    width: 3fr;    /* (9)! */
+}
+
+Screen {
+    layers: ruler;
+}
+
+Ruler {
+    layer: ruler;
+    dock: bottom;
+    overflow: hidden;
+    height: 1;
+    background: $accent;
+}
diff --git a/docs/examples/styles/width_comparison.py b/docs/examples/styles/width_comparison.py
new file mode 100644
index 000000000..2971425b6
--- /dev/null
+++ b/docs/examples/styles/width_comparison.py
@@ -0,0 +1,28 @@
+from textual.app import App
+from textual.containers import Horizontal
+from textual.widgets import Placeholder, Label, Static
+
+
+class Ruler(Static):
+    def compose(self):
+        ruler_text = "····•" * 100
+        yield Label(ruler_text)
+
+
+class HeightComparisonApp(App):
+    def compose(self):
+        yield Horizontal(
+            Placeholder(id="cells"),  # (1)!
+            Placeholder(id="percent"),
+            Placeholder(id="w"),
+            Placeholder(id="h"),
+            Placeholder(id="vw"),
+            Placeholder(id="vh"),
+            Placeholder(id="auto"),
+            Placeholder(id="fr1"),
+            Placeholder(id="fr3"),
+        )
+        yield Ruler()
+
+
+app = HeightComparisonApp(css_path="width_comparison.css")