From 592fe9cb13d70379738a524cd7e8ef3497eb8db0 Mon Sep 17 00:00:00 2001
From: faruq <yeemirahman@gmail.com>
Date: Mon, 13 May 2024 12:06:47 +0100
Subject: [PATCH] completed

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

diff --git a/src/styles.css b/src/styles.css
index 59fd797..c5d4263 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -39,18 +39,40 @@
     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: 50px 1fr; 
+}
 
-.three-column-grid {}
+.three-column-grid {
+  grid-template-columns: repeat(3, 1fr);
+}
 
-.three-column-grid__expand-two {}
+.three-column-grid__expand-two {
+  grid-template-columns: 1fr 3fr 1fr; /* Middle box takes more space */
+}
 
-.five-column-grid {}
+.five-column-grid {
+  grid-template-columns: repeat(5, 1fr);
+}
 
-.center-grid {}
+.center-grid {
+  display: grid;
+  place-items: center; 
+}
 
-.grid-in-grid-1 {}
+.grid-in-grid-1 .box {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* Creates three columns within each box */
+  gap: 4px;
+}
 
-.grid-in-grid-2 {}
+.grid-in-grid-2 .box {
+  display: grid;
+  grid-template-rows: auto; /* Ensures each box behaves as a grid */
+  grid-template-columns: 1fr 2fr 1fr;
+  gap: 4px;
+  grid-template-columns: repeat(2, 1fr);
+}
 
 .grid-madness {}