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

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)