diff options
author | Mark Otto <markd.otto@gmail.com> | 2021-07-26 18:45:10 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-26 18:45:10 +0300 |
commit | e208774fc1b301b96e65997dd0fca92c94ac20fb (patch) | |
tree | 88b38d8918b48d826aefae2cbc12b170112e555d /scss | |
parent | 905db7dadb60385dfc1d563c398c01121a80bf53 (diff) |
Clean up a couple CSS Grid issues (#34572)
- Moves the make-cssgrid() mixin to the grid mixins stylesheet
- Updates the g-start-* classes to start at 1 instead of 0 as 0 is an invalid value (fixes #34399)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_grid.scss | 23 | ||||
-rw-r--r-- | scss/mixins/_grid.scss | 24 |
2 files changed, 24 insertions, 23 deletions
diff --git a/scss/_grid.scss b/scss/_grid.scss index 13f21a3ff7..27fd558472 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -12,29 +12,6 @@ } } -@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) { - @each $breakpoint in map-keys($breakpoints) { - $infix: breakpoint-infix($breakpoint, $breakpoints); - - @include media-breakpoint-up($breakpoint, $breakpoints) { - @if $columns > 0 { - @for $i from 1 through $columns { - .g-col#{$infix}-#{$i} { - grid-column: auto / span $i; - } - } - - // `$columns - 1` because offsetting by the width of an entire row isn't possible - @for $i from 0 through ($columns - 1) { - .g-start#{$infix}-#{$i} { - grid-column-start: $i; - } - } - } - } - } -} - @if $enable-cssgrid { .grid { display: grid; diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index ff6941c464..41760ef4ea 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -130,3 +130,27 @@ } } } + +@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) { + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); + + @include media-breakpoint-up($breakpoint, $breakpoints) { + @if $columns > 0 { + @for $i from 1 through $columns { + .g-col#{$infix}-#{$i} { + grid-column: auto / span $i; + } + } + + // Start with `1` because `0` is and invalid value. + // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible. + @for $i from 1 through ($columns - 1) { + .g-start#{$infix}-#{$i} { + grid-column-start: $i; + } + } + } + } + } +} |