// Framework grid generation // // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. @mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) { // Common properties for all breakpoints %grid-column { position: relative; // Prevent columns from collapsing when empty min-height: 1px; @if $enable-flex { width: 100%; } @include make-gutters($gutters); } @each $breakpoint in map-keys($breakpoints) { // Logic is a little reversed here: `breakpoint-min` returns false when it's the smallest breakpoint. $min: not breakpoint-min($breakpoint, $breakpoints); // Allow columns to stretch full width below their breakpoints @for $i from 1 through $columns { @if $min { .col-#{$i} { @extend %grid-column; } } @else { .col-#{$breakpoint}-#{$i} { @extend %grid-column; } } } @if $enable-flex { @if $min { .col { @extend %grid-column; } } @else { .col-#{$breakpoint} { @extend %grid-column; } } } @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns @if $enable-flex { @if $min { .col { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col-auto { flex: 0 0 auto; width: auto; } } @else { .col-#{$breakpoint} { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col-#{$breakpoint}-auto { flex: 0 0 auto; width: auto; } } } @for $i from 1 through $columns { @if $min { .col-#{$i} { @include make-col($i, $columns); } } @else { .col-#{$breakpoint}-#{$i} { @include make-col($i, $columns); } } } @each $modifier in (pull, push) { @for $i from 0 through $columns { @if $min { .#{$modifier}-#{$i} { @include make-col-modifier($modifier, $i, $columns) } } @else { .#{$modifier}-#{$breakpoint}-#{$i} { @include make-col-modifier($modifier, $i, $columns) } } } } // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { @if not $min or $i != 0 { // Avoid emitting useless .offset-xs-0 @if $min { .offset-#{$i} { @include make-col-modifier(offset, $i, $columns) } } @else { .offset-#{$breakpoint}-#{$i} { @include make-col-modifier(offset, $i, $columns) } } } } } } }