kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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>
This commit is contained in:
Mark Otto 2021-07-26 10:45:10 -05:00 committed by GitHub
parent 905db7dadb
commit e208774fc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
scss/_grid.scss
View File

@ -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;

24
scss/mixins/_grid.scss
View File

@ -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
site/content/docs/5.0/layout/css-grid.md
View File

@ -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">