diff --git a/_sass/helpers.scss b/_sass/helpers.scss index d0ffd72..673cc14 100644 --- a/_sass/helpers.scss +++ b/_sass/helpers.scss @@ -26,6 +26,39 @@ $directions: (top, right, bottom, left); /// `-md`, `-lg`, `-xl`. $infix: breakpoint-infix($breakpoint, $grid-breakpoints); +/// Grilla en CSS, soporta armar una cantidad de columnas, indicar las +/// columnas que ocupan los elementos descendientes e incluso +/// solapamiento. +/// +/// @example html +///
+///
+///
+///
+ .d#{$infix}-grid { + display: grid !important; + + @each $spacer, $_ in $spacers { + &.grid-cols#{$infix}-#{$spacer} { + grid-template-columns: repeat($spacer, 1fr) !important; + } + + & > .grid-row#{$infix}-#{$spacer} { + grid-row: $spacer !important; + } + + & > .grid-col#{$infix}-#{$spacer} { + grid-column: $spacer !important; + } + + @each $spacer_to, $_ in $spacers { + & > .grid-col#{$infix}-#{$spacer}-to-#{$spacer_to} { + grid-column: #{$spacer} / #{$spacer_to} !important; + } + } + } + } + /// Ocultar la barra de scroll, Ăștil para sliders horizontales. /// /// @example html