diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index 4f456e273a..4412466f6f 100644
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -92,6 +92,37 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
{% endexample %}
+Sometimes it's useful to have a column that lays itself out based on the natural width of its content, especially single line content like inputs, numbers, etc. Using the `col-{breakpoint}-auto` classes, you can guide this behavior as desired. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width grows.
+
+
+{% example html %}
+
+
+
+ 1 of 3
+
+
+ Variable width content
+
+
+ 3 of 3
+
+
+
+
+ 1 of 3
+
+
+ Variable width content
+
+
+ 3 of 3
+
+
+
+{% endexample %}
+
+
## Responsive flexbox
Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`.
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 35ccd9221e..5d79174893 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -40,6 +40,10 @@
flex-grow: 1;
max-width: 100%;
}
+ .col-#{$breakpoint}-auto {
+ flex: 0 0 auto;
+ width: auto;
+ }
}
@for $i from 1 through $columns {