diff options
author | Mark Otto <markd.otto@gmail.com> | 2021-06-23 05:51:16 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-06-23 05:51:16 +0300 |
commit | dd824f2d3eab63790ccbd30d6e5c125b77d82d32 (patch) | |
tree | 00c75950290b4384dca952ea3f37cde7f65cc590 /scss | |
parent | 5967ebd9069462cf1b16bd0c4c49ea0f3e808098 (diff) |
v5.1: Add optional CSS grid (#31813)
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_grid.scss | 34 | ||||
-rw-r--r-- | scss/_variables.scss | 1 |
2 files changed, 35 insertions, 0 deletions
diff --git a/scss/_grid.scss b/scss/_grid.scss index 5686f31fe0..13f21a3ff7 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -12,6 +12,40 @@ } } +@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; + grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr); + grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr); + gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width}); + + @include make-cssgrid(); + } +} + // Columns // diff --git a/scss/_variables.scss b/scss/_variables.scss index 06dfa4a4dd..8abd750329 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -221,6 +221,7 @@ $enable-transitions: true !default; $enable-reduced-motion: true !default; $enable-smooth-scroll: true !default; $enable-grid-classes: true !default; +$enable-cssgrid: false !default; $enable-button-pointers: true !default; $enable-rfs: true !default; $enable-validation-icons: true !default; |