From b67a5c21499826dad8a41eefc4bf5e8e02f6616b Mon Sep 17 00:00:00 2001
From: Drew <badea.andrei1908@gmail.com>
Date: Tue, 1 Nov 2022 12:24:19 +0100
Subject: [PATCH] Made the CSS Grid Layout

---
 dashboard_static/index.html      | 12 ++++++---
 dashboard_static/style/style.css | 42 ++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/dashboard_static/index.html b/dashboard_static/index.html
index 550b0ec..9e5f8d1 100644
--- a/dashboard_static/index.html
+++ b/dashboard_static/index.html
@@ -56,8 +56,9 @@
             </div>
         </div>
         <div class="main">
+            <!--
             <div class="leftcol">
-                <div class="tweet"> <!-- You can use this template in the javascript file, css will come later -->
+                <div class="tweet"> 
                     <img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture">
                     <div class="tweet-content">
                         <div class="tweet-name">
@@ -82,8 +83,13 @@
                     </div>
                 </div>
             </div>
-            <div class="centercol"></div>
-            <div class="rightcol"></div>
+            -->
+            <div class = "maintable">
+                <div class = "leftcol"></div>
+                <div class="centercol"></div>
+                <div class = "searchbar"></div>
+                <div class = "popchart"></div>
+            </div>
         </div> 
     </div>
     <script src="./js/code.js"></script>
diff --git a/dashboard_static/style/style.css b/dashboard_static/style/style.css
index 851943a..802992c 100644
--- a/dashboard_static/style/style.css
+++ b/dashboard_static/style/style.css
@@ -101,4 +101,46 @@ body {
 .tweet-interaction {
 	display: flex;
 	align-items: center;
+}
+
+/* Three main columns; CSS Grid */
+
+.maintable {
+	/*background-color: #ffffff; */ /* The colors are there just so that I can see what I'm doing better */
+	display: grid;
+	width: 100%;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: 1fr 1fr;
+
+	gap: 20px;
+	margin:20px;
+}
+
+.leftcol {
+	background-color: red;
+	border-radius: 16px;
+	grid-row: 1/ -1;
+
+	margin: 40px;
+}
+
+.centercol {
+	background-color: green;
+	border-radius: 16px;
+	grid-row: 1/ -1;
+	margin: 40px;
+}
+
+.searchbar {
+	background-color: blue;
+	border-radius: 16px;
+	height: 400px;
+	margin: 40px;
+}
+
+.popchart {
+	background-color: rgba(255, 0, 255, 0.344);
+	border-radius: 16px;
+	height: 400px;
+	margin: 40px;
 }
\ No newline at end of file