Skip to content

Allow individual grid classes to override .row-cols #33621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jun 3, 2021
Merged

Allow individual grid classes to override .row-cols #33621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cf25432
Row-columns-breakpoint inconsistency fix
Apr 13, 2021
0fa9f9e
Merge branch 'main' into RowColConsistency
lacutah Apr 15, 2021
5b20d92
Merge branch 'main' into RowColConsistency
lacutah Apr 15, 2021
f12cc3b
Merge branch 'main' into RowColConsistency
lacutah Apr 18, 2021
a0d15d9
Merge branch 'main' into RowColConsistency
lacutah Apr 19, 2021
7fdc8a6
Merge branch 'main' into RowColConsistency
lacutah Apr 27, 2021
05494b5
Merge branch 'main' into RowColConsistency
lacutah Apr 27, 2021
6b75bf2
Merge branch 'main' into RowColConsistency
ffoodd May 4, 2021
489b46d
Merge branch 'main' into RowColConsistency
ffoodd May 17, 2021
67a0d83
Merge branch 'main' into RowColConsistency
XhmikosR Jun 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion scss/mixins/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} {
Expand All @@ -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();
}
Expand Down
23 changes: 21 additions & 2 deletions site/content/docs/5.0/layout/grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down