add CSS grid utilities

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) {

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 {

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>