diff options
| -rw-r--r-- | scss/mixins/_grid.scss | 8 | ||||
| -rw-r--r-- | site/content/docs/5.0/layout/grid.md | 23 |
2 files changed, 28 insertions, 3 deletions
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index d757eac740..36031df796 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -65,8 +65,8 @@ @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @each $breakpoint in map-keys($breakpoints) { + // .row-cols defaults must all appear before .col overrides so they can be overridden. $infix: breakpoint-infix($breakpoint, $breakpoints); - @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns .col#{$infix} { @@ -84,7 +84,13 @@ } } } + } + } + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); + + @include media-breakpoint-up($breakpoint, $breakpoints) { .col#{$infix}-auto { @include make-col-auto(); } diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md index d0c7a80f7e..afa3818a20 100644 --- a/site/content/docs/5.0/layout/grid.md +++ b/site/content/docs/5.0/layout/grid.md @@ -299,9 +299,9 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of ### Row columns -Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a shortcut. With `.row-cols-auto` you can give the columns their natural width. +Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a default for contained columns. With `.row-cols-auto` you can give the columns their natural width. -Use these row columns classes to quickly create basic grid layouts or to control your card layouts. +Use these row columns classes to quickly create basic grid layouts or to control your card layouts and override when needed at the column level. {{< example class="bd-example-row" >}} <div class="container"> @@ -369,6 +369,25 @@ Use these row columns classes to quickly create basic grid layouts or to control </div> {{< /example >}} +{{< example class="bd-example-row" >}} +<div class="container"> + <div class="row row-cols-2 row-cols-lg-3"> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col-4 col-lg-2">Column</div> + <div class="col-4 col-lg-2">Column</div> + <div class="col-4 col-lg-2">Column</div> + <div class="col-4 col-lg-2">Column</div> + <div class="col-4 col-lg-2">Column</div> + <div class="col-4 col-lg-2">Column</div> + </div> +</div> +{{< /example >}} + You can also use the accompanying Sass mixin, `row-cols()`: ```scss |