grillas!

_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
+///   <div class="d-grid grid-cols-5">
+///     <div class="grid-row-1 grid-col-1-to-2"></div>
+///     <div class="grid-row-2 grid-col-2-to-3"></div>
+///   </div>
+    .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