0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-12 00:08:59 +01:00
Bootstrap/scss/_grid.scss

57 lines
1.2 KiB
SCSS
Raw Normal View History

// Row
//
2019-07-27 08:30:39 +02:00
// Rows contain your columns.
@if $enable-grid-classes {
.row {
@include make-row();
2019-09-28 16:13:36 +02:00
> * {
@include make-col-ready();
}
}
2019-09-28 16:13:36 +02:00
}
2021-06-23 04:51:16 +02:00
@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
//
// Common styles for small and large grid columns
@if $enable-grid-classes {
@include make-grid-columns();
}