bootstrap/mixins/_grid.scss

0001 /// Grid system
0002 //
0003 // Generate semantic grid columns with these mixins.
0004
0005 @mixin make-row($gutter: $grid-gutter-width) {
0006   --#{$variable-prefix}gutter-x: #{$gutter};
0007   --#{$variable-prefix}gutter-y: 0;
0008   display: flex;
0009   flex-wrap: wrap;
0010   margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
0011   margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
0012   margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
0013 }
0014
0015 @mixin make-col-ready($gutter: $grid-gutter-width) {
0016   // Add box sizing if only the grid is loaded
0017   box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
0018   // Prevent columns from becoming too narrow when at smaller grid tiers by
0019   // always setting `width: 100%;`. This works because we set the width
0020   // later on to override this initial width.
0021   flex-shrink: 0;
0022   width: 100%;
0023   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
0024   padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
0025   padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
0026   margin-top: var(--#{$variable-prefix}gutter-y);
0027 }
0028
0029 @mixin make-col($size, $columns: $grid-columns) {
0030   flex: 0 0 auto;
0031   width: percentage($size / $columns);
0032 }
0033
0034 @mixin make-col-auto() {
0035   flex: 0 0 auto;
0036   width: auto;
0037 }
0038
0039 @mixin make-col-offset($size, $columns: $grid-columns) {
0040   $num: $size / $columns;
0041   margin-left: if($num == 0, 0, percentage($num));
0042 }
0043
0044 // Row columns
0045 //
0046 // Specify on a parent element(e.g., .row) to force immediate children into NN
0047 // numberof columns. Supports wrapping to new lines, but does not do a Masonry
0048 // style grid.
0049 @mixin row-cols($count) {
0050   > * {
0051     flex: 0 0 auto;
0052     width: 100% / $count;
0053   }
0054 }
0055
0056 // Framework grid generation
0057 //
0058 // Used only by Bootstrap to generate the correct number of grid classes given
0059 // any value of `$grid-columns`.
0060
0061 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
0062   @each $breakpoint in map-keys($breakpoints) {
0063     $infix: breakpoint-infix($breakpoint, $breakpoints);
0064
0065     @include media-breakpoint-up($breakpoint, $breakpoints) {
0066       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
0067       .col#{$infix} {
0068         flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
0069       }
0070
0071       .row-cols#{$infix}-auto > * {
0072         @include make-col-auto();
0073       }
0074
0075       @if $grid-row-columns > 0 {
0076         @for $i from 1 through $grid-row-columns {
0077           .row-cols#{$infix}-#{$i} {
0078             @include row-cols($i);
0079           }
0080         }
0081       }
0082
0083       .col#{$infix}-auto {
0084         @include make-col-auto();
0085       }
0086
0087       @if $columns > 0 {
0088         @for $i from 1 through $columns {
0089           .col#{$infix}-#{$i} {
0090             @include make-col($i, $columns);
0091           }
0092         }
0093
0094         // `$columns - 1` because offsetting by the width of an entire row isn't possible
0095         @for $i from 0 through ($columns - 1) {
0096           @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
0097             .offset#{$infix}-#{$i} {
0098               @include make-col-offset($i, $columns);
0099             }
0100           }
0101         }
0102       }
0103
0104       // Gutters
0105       //
0106       // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
0107       @each $key, $value in $gutters {
0108         .g#{$infix}-#{$key},
0109         .gx#{$infix}-#{$key} {
0110           --#{$variable-prefix}gutter-x: #{$value};
0111         }
0112
0113         .g#{$infix}-#{$key},
0114         .gy#{$infix}-#{$key} {
0115           --#{$variable-prefix}gutter-y: #{$value};
0116         }
0117       }
0118     }
0119   }
0120 }