From d602c44c1bb531e5272338470f6e0948ec7749b3 Mon Sep 17 00:00:00 2001
From: Zainab Choudhry <zainabchoudhry05@gmail.com>
Date: Fri, 10 May 2024 15:22:35 +0100
Subject: [PATCH] Completed core.

---
 src/styles.css | 82 +++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 74 insertions(+), 8 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index 59fd797..4f00ca6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -39,18 +39,84 @@
     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: 200px 1fr;
+  grid-template-rows: 1fr;
+  gap: 15px;
+}
+.two-column-grid__expand-two .logo {
+  grid-column: 1 / span 1;
+  grid-row: 1 / span 1;
+}
+.two-column-grid__expand-two .box {
+  grid-column: 2 / span 1;
+  grid-row: 1 / span 1;
+}
+
+.three-column-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1fr;
+  gap: 15px;
+}
+
+.three-column-grid__expand-two {
+  display: grid;
+  grid-template-columns: 100px 1fr 100px;
+  grid-template-rows: 1fr;
+  gap: 15px;
+}
+
+.five-column-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: 1fr;
+  gap: 15px;
+}
 
-.three-column-grid {}
+.center-grid {
+  display: grid;
+  grid-template-columns: 300px;
+  grid-template-rows: 1fr;
+  justify-content: center;
+}
 
-.three-column-grid__expand-two {}
+.grid-in-grid-1 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  gap: 15px;
+}
 
-.five-column-grid {}
+.grid-in-grid-1 .box {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: 1fr;
+}
 
-.center-grid {}
+.grid-in-grid-2 {
+  display: grid;
+  grid-template-columns: 100px 1fr 300px;
+  grid-template-rows: 1fr;
+  gap: 15px;
+}
 
-.grid-in-grid-1 {}
+.grid-in-grid-2 .box {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: 1fr;
+}
 
-.grid-in-grid-2 {}
+.grid-madness {
+  display: grid;
+  grid-template-columns: 1fr 3fr 1fr;
+  grid-template-rows: 1fr 3fr 1fr;
+  gap: 15px;
+}
 
-.grid-madness {}
+.grid-madness .box {
+  display: grid;
+  grid-auto-rows: max-content;
+  grid-auto-columns: min-content;
+}