From b89096cbe61d0ba8046a4d187db98628d99d6015 Mon Sep 17 00:00:00 2001
From: aleidk <ale.navarro.parra@gmail.com>
Date: Sun, 20 Aug 2023 12:58:53 -0400
Subject: [PATCH] add CSS grid utilities

---
 src/assets/style/global.css |  4 +++
 src/assets/style/utils.css  | 69 +++++++++++++++++++++++++++++++++----
 src/pages/index.astro       |  8 +++++
 3 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/src/assets/style/global.css b/src/assets/style/global.css
index d582740..0bc9581 100644
--- a/src/assets/style/global.css
+++ b/src/assets/style/global.css
@@ -14,6 +14,10 @@ body {
   margin: auto;
 }
 
+section:not(:first-child) {
+  margin-top: var(--prj-spacing-4);
+}
+
 /* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
 
 @media screen and (min-width: 640px) {
diff --git a/src/assets/style/utils.css b/src/assets/style/utils.css
index a46ade9..e9b276c 100644
--- a/src/assets/style/utils.css
+++ b/src/assets/style/utils.css
@@ -7,29 +7,86 @@
 }
 
 .hstack {
+  --prj-gap: var(--prj-spacing-3);
   display: flex;
-  gap: 1rem;
+  gap: var(--prj-gap);
   align-items: center;
 }
 
+.grid {
+  --prj-gap: var(--prj-spacing-3);
+  --prj-columns: repeat(3, 1fr);
+  display: grid;
+  grid-template-columns: var(--prj-columns);
+  gap: var(--prj-gap);
+}
+
+.grid-cols-1 {
+  --prj-columns: repeat(1, 1fr);
+}
+
+.grid-cols-2 {
+  --prj-columns: repeat(2, 1fr);
+}
+
+.grid-cols-3 {
+  --prj-columns: repeat(3, 1fr);
+}
+
+.grid-cols-4 {
+  --prj-columns: repeat(4, 1fr);
+}
+
+.grid-cols-5 {
+  --prj-columns: repeat(5, 1fr);
+}
+
+.grid-cols-6 {
+  --prj-columns: repeat(6, 1fr);
+}
+
+.grid-cols-7 {
+  --prj-columns: repeat(7, 1fr);
+}
+
+.grid-cols-8 {
+  --prj-columns: repeat(8, 1fr);
+}
+
+.grid-cols-9 {
+  --prj-columns: repeat(9, 1fr);
+}
+
+.grid-cols-10 {
+  --prj-columns: repeat(10, 1fr);
+}
+
+.grid-cols-11 {
+  --prj-columns: repeat(11, 1fr);
+}
+
+.grid-cols-12 {
+  --prj-columns: repeat(12, 1fr);
+}
+
 .gap-1 {
-  gap: var(--prj-spacing-1);
+  --prj-gap: var(--prj-spacing-1);
 }
 
 .gap-2 {
-  gap: var(--prj-spacing-2);
+  --prj-gap: var(--prj-spacing-2);
 }
 
 .gap-3 {
-  gap: var(--prj-spacing-3);
+  --prj-gap: var(--prj-spacing-3);
 }
 
 .gap-4 {
-  gap: var(--prj-spacing-4);
+  --prj-gap: var(--prj-spacing-4);
 }
 
 .gap-5 {
-  gap: var(--prj-spacing-5);
+  --prj-gap: var(--prj-spacing-5);
 }
 
 .list-unstyle {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 960b9e7..b36b7a1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -32,6 +32,14 @@ import portrait from '../assets/images/portrait.jpg';
       ut ea consectetur et est culpa et culpa duis.
     </p>
   </section>
+
+  <section>
+    <div class="grid grid-cols-3">
+      <Card />
+      <Card />
+      <Card />
+    </div>
+  </section>
 </Layout>
 
 <style>