From 3e7b1444c5a420d5a38a9e5d78cf75440d8c0f61 Mon Sep 17 00:00:00 2001
From: Rohith Pariki <rohithpariki@gmail.com>
Date: Sat, 29 Aug 2026 14:45:52 +0530
Subject: [PATCH] docs(grid): document .col-auto in variable-width content

---
 site/src/content/docs/layout/columns.mdx | 2 +-
 site/src/content/docs/layout/grid.mdx    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/src/content/docs/layout/columns.mdx b/site/src/content/docs/layout/columns.mdx
index c97a4bfa12d7..cbe54334c770 100644
--- a/site/src/content/docs/layout/columns.mdx
+++ b/site/src/content/docs/layout/columns.mdx
@@ -277,7 +277,7 @@ In addition to column clearing at responsive breakpoints, you may need to reset
 
 #### Margin utilities
 
-With the move to flexbox in v4, you can use margin utilities like `.me-auto` to force sibling columns away from one another.
+With the move to flexbox in v4, you can use margin utilities like `.me-auto` to force sibling columns away from one another, including with [variable-width columns]([[docsref:/layout/grid#variable-width-content]]) such as `.col-auto`.
 
 <Example class="bd-example-row" code={`<div class="container text-center">
     <div class="row">
diff --git a/site/src/content/docs/layout/grid.mdx b/site/src/content/docs/layout/grid.mdx
index a3c11847bde2..8a77bdeba1d4 100644
--- a/site/src/content/docs/layout/grid.mdx
+++ b/site/src/content/docs/layout/grid.mdx
@@ -176,7 +176,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
 
 ### Variable width content
 
-Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.
+Use `.col-auto` and `col-{breakpoint}-auto` classes to size columns based on the natural width of their content across all viewports or at specific breakpoints.
 
 <Example class="bd-example-row" code={`<div class="container text-center">
     <div class="row justify-content-md-center">
@@ -194,7 +194,7 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
       <div class="col">
         1 of 3
       </div>
-      <div class="col-md-auto">
+      <div class="col-auto">
         Variable width content
       </div>
       <div class="col col-lg-2">