v6: Update alignment examples text and widths (#42392)

Replace generic "Flex item"/"Grid item" placeholders with descriptive words (e.g. "Align", "Items", "Start/End/Center/Stretch") across align-items, justify-items, and place-items docs. Add w-5 utility to flex examples to give consistent item widths so alignment demos render more clearly. Files updated: site/src/content/docs/utilities/align-items.mdx, justify-items.mdx, place-items.mdx.

diff --git a/site/src/content/docs/utilities/align-items.mdx b/site/src/content/docs/utilities/align-items.mdx
index 429ec2e4bafa58861349af83011d6dba6033b7ef..60d748b2c42826edddf1c30ca106292ec28269f1 100644 (file)
--- a/site/src/content/docs/utilities/align-items.mdx
+++ b/site/src/content/docs/utilities/align-items.mdx
@@ -17,29 +17,29 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
 
 <div class="bd-example bd-example-flex">
   <div class="d-flex align-items-start mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-2 w-5">Align</div>
+    <div class="p-2 w-5">Items</div>
+    <div class="p-2 w-5">Start</div>
   </div>
   <div class="d-flex align-items-end mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-2 w-5">Align</div>
+    <div class="p-2 w-5">Items</div>
+    <div class="p-2 w-5">End</div>
   </div>
   <div class="d-flex align-items-center mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-2 w-5">Align</div>
+    <div class="p-2 w-5">Items</div>
+    <div class="p-2 w-5">Center</div>
   </div>
   <div class="d-flex align-items-baseline mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-2 w-5">Align</div>
+    <div class="p-2 w-5">Items</div>
+    <div class="p-2 w-5">Baseline</div>
   </div>
   <div class="d-flex align-items-stretch" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-2 w-5">Align</div>
+    <div class="p-2 w-5">Items</div>
+    <div class="p-2 w-5">Stretch</div>
   </div>
 </div>
 

diff --git a/site/src/content/docs/utilities/justify-items.mdx b/site/src/content/docs/utilities/justify-items.mdx
index 74a724f0903e736171e0eb7d80f65828d9d0e69b..700f2670656f1323f1dc9e53a3bc8f2f1a8b9cb3 100644 (file)
--- a/site/src/content/docs/utilities/justify-items.mdx
+++ b/site/src/content/docs/utilities/justify-items.mdx
@@ -19,24 +19,24 @@ Use `justify-items` utilities to control the horizontal alignment of grid items.
 
 <div class="bd-example bd-example-flex vstack gap-3">
   <div class="d-grid gap-3 justify-items-start" style="grid-template-columns: 1fr 1fr 1fr;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Justify</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">Start</div>
   </div>
   <div class="d-grid gap-3 justify-items-end" style="grid-template-columns: 1fr 1fr 1fr;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Justify</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">End</div>
   </div>
   <div class="d-grid gap-3 justify-items-center" style="grid-template-columns: 1fr 1fr 1fr;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Justify</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">Center</div>
   </div>
   <div class="d-grid gap-3 justify-items-stretch" style="grid-template-columns: 1fr 1fr 1fr;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Justify</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">Stretch</div>
   </div>
 </div>
 

diff --git a/site/src/content/docs/utilities/place-items.mdx b/site/src/content/docs/utilities/place-items.mdx
index 98bb2613dde07c2814ff1c1ce0b15d0c89b9f964..eb7384094400125e135eb2a53204bdead1a102a6 100644 (file)
--- a/site/src/content/docs/utilities/place-items.mdx
+++ b/site/src/content/docs/utilities/place-items.mdx
@@ -19,24 +19,24 @@ Use `place-items` utilities to control the alignment of grid items. Choose from
 
 <div class="bd-example bd-example-flex vstack gap-3">
   <div class="d-grid gap-3 place-items-start" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Place</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">Start</div>
   </div>
   <div class="d-grid gap-3 place-items-end" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Place</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">End</div>
   </div>
   <div class="d-grid gap-3 place-items-center" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Place</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">Center</div>
   </div>
   <div class="d-grid gap-3 place-items-stretch" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Place</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">Stretch</div>
   </div>
 </div>