Cleanup

- Rename and move the variable to variables file
- Move code to the grid file
- Use the mixin to generate our own classes
- Wrap in a grid classes enabled conditional
- Document the mixin

1 files changed, 14 insertions, 0 deletions

diff --git a/site/docs/4.3/layout/grid.md b/site/docs/4.3/layout/grid.md
index f03808044c..3b79360fe3 100644
--- a/site/docs/4.3/layout/grid.md
+++ b/site/docs/4.3/layout/grid.md
@@ -381,6 +381,20 @@ Use these row columns classes to quickly create basic grid layouts or to control
 {% include example.html content=example %}
 </div>
 
+You can also use the accompanying Sass mixin, `row-cols()`:
+
+{% highlight scss %}
+.element {
+  // Three columns to start
+  @include row-cols(3);
+
+  // Five columns from medium breakpoint up
+  @include media-breakpoint-up(md) {
+    @include row-cols(5);
+  }
+}
+{% endhighlight %}
+
 ## Alignment
 
 Use flexbox alignment utilities to vertically and horizontally align columns. **Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a `min-height` as shown below.** [See Flexbugs #3 for more details.](https://github.com/philipwalton/flexbugs#flexbug-3)