diff options
author | Mark Otto <markdotto@gmail.com> | 2019-07-24 09:00:29 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-09-26 18:37:07 +0300 |
commit | d08567797f9da9fc8f3030a1ce5ba54b82df1824 (patch) | |
tree | 30b4742ef9a51d1d30eee33b40b0adaa050a1bad /site | |
parent | acb2b7061c56f9c6e05aff17750a03334f6d70e8 (diff) |
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
Diffstat (limited to 'site')
-rw-r--r-- | site/docs/4.3/layout/grid.md | 14 |
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) |