From 7554380651e34e4e247ad0f0cc7b10b0c0743c2e Mon Sep 17 00:00:00 2001
From: Farshad <f.bagdeli13@gmail.com>
Date: Thu, 7 Mar 2024 12:05:56 +0100
Subject: [PATCH] without Grid madness

---
 src/styles.css | 65 ++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 58 insertions(+), 7 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index 59fd797..4665d88 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -39,18 +39,69 @@
     https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
 */
 
-.two-column-grid__expand-two {}
+.two-column-grid__expand-two {
+  display: grid;
+  grid-template-columns: 150px 1fr;
+  gap: 10px;
+}
+
+.three-column-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 10px;
+}
 
-.three-column-grid {}
+.three-column-grid__expand-two {
+  display: grid;
+  grid-template-columns: 50px 1fr 50px;
+  gap: 10px;
+}
 
-.three-column-grid__expand-two {}
+.five-column-grid {
+  display: grid;
+  grid-template-columns: repeat(5,1fr);
+  gap: 10px;
+}
 
-.five-column-grid {}
+.center-grid {
+  display: grid;
+  grid-template-columns: 300px;
+  place-content: center;
+}
 
-.center-grid {}
+.grid-in-grid-1 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  div {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(50px,1fr));
+    gap: 10px;
+  }
+}
 
-.grid-in-grid-1 {}
+.grid-in-grid-2 {
+  display: grid;
+  grid-template-columns: 70px 1fr 200px;
+  div {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(50px,1fr));
+    gap: 10px;
+  }
+}
 
-.grid-in-grid-2 {}
 
+/* <div class="container grid-in-grid-2">
+      <div class="box">
+        <div class="inner-box"></div>
+      </div>
+      <div class="box expand">
+        <div class="inner-box"></div>
+      </div>
+      <div class="box">
+        <div class="inner-box"></div>
+        <div class="inner-box"></div>
+        <div class="inner-box"></div>
+      </div>
+    </div> */
 .grid-madness {}