Skip to content

Commit

Permalink
Clean up a couple CSS Grid issues
Browse files Browse the repository at this point in the history
- 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)
  • Loading branch information
mdo committed Jul 25, 2021
1 parent 2bdbb42 commit d2bda79
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 24 deletions.
23 changes: 0 additions & 23 deletions scss/_grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
24 changes: 24 additions & 0 deletions scss/mixins/_grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
}
}
2 changes: 1 addition & 1 deletion site/content/docs/5.0/layout/css-grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ Grid items automatically wrap to the next line when there's no more room horizon

## Starts

Start classes aim to replace our default grid's offset classes, but they're not entirely the same. CSS Grid creates a grid template through styles that tell browsers to "start at this column" and "end at this column." Those properties are `grid-column-start` and `grid-column-end`. Start classes are shorthand for the former. Pair them with the column classes to size and align your columns however you need.
Start classes aim to replace our default grid's offset classes, but they're not entirely the same. CSS Grid creates a grid template through styles that tell browsers to "start at this column" and "end at this column." Those properties are `grid-column-start` and `grid-column-end`. Start classes are shorthand for the former. Pair them with the column classes to size and align your columns however you need. Start classes begin at `1` as `0` is an invalid value for these properties.

{{< example class="bd-example-cssgrid" >}}
<div class="grid">
Expand Down

0 comments on commit d2bda79

Please sign in to comment.