From 6fcf8a428425ebf22cc9d25797020739bce990c4 Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Fri, 12 Nov 2021 14:01:49 -0300
Subject: [PATCH] grillas!

---
 _sass/helpers.scss | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

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
+///   <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