Merge pull request #4 from olinpin/cssgrid

Cssgrid

dashboard_static/index.html

@@ -57,8 +57,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">
@@ -83,8 +84,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>

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;
 }