1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-24 20:41:33 +02:00
Files
bootstrap/scss/layout/_grid.scss
Mark Otto dbf8a5b7e3 Restore both grids , enable CSS grid by default, and update mixins (#41702)
* Restore both grids and update mixins

* Bundlewatch
2025-09-15 17:36:27 -07:00

74 lines
1.4 KiB
SCSS

@use "sass:map";
@use "../config" as *;
@use "../mixins/grid" as *;
@use "breakpoints" as *;
// mdo-do
// - check gap utilities as replacement for gutter classes from v5
:root {
@each $name, $value in $grid-breakpoints {
--#{$prefix}breakpoint-#{$name}: #{$value};
}
}
@layer layout {
@if $enable-grid-classes {
.row {
@include make-row();
> * {
@include make-col-ready();
}
}
@include make-grid-columns();
}
@if $enable-cssgrid {
.grid {
--#{$prefix}columns: #{$grid-columns};
--#{$prefix}rows: 1;
--#{$prefix}gap: #{$grid-gutter-width};
display: grid;
grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);
grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);
gap: var(--#{$prefix}gap);
}
@include make-cssgrid();
}
// mdo-do: add to utilities?
.grid-cols-subgrid {
grid-template-columns: subgrid;
}
.grid-fill {
--#{$prefix}gap: #{$grid-gutter-width};
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-auto-flow: row;
gap: var(--#{$prefix}gap);
}
// mdo-do: add to utilities?
.g-col-auto {
grid-column: auto/auto;
}
// mdo-do: add to utilities?
.grid-cols-3 {
--#{$prefix}columns: 3;
}
.grid-cols-4 {
--#{$prefix}columns: 4;
}
.grid-cols-6 {
--#{$prefix}columns: 6;
}
}