olinpin/twitter-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made the CSS Grid Layout

Browse Source
This commit is contained in:
Drew
2022-11-01 12:24:19 +01:00
parent 9445a7f4cd
commit b67a5c2149
2 changed files with 51 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
dashboard_static/index.html
View File

@@ -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 = "maintable">
<div class = "leftcol"></div>
<div class="centercol"></div>
<div class="rightcol"></div>
<div class = "searchbar"></div>
<div class = "popchart"></div>
</div>
</div>
</div>
<script src="./js/code.js"></script>

42
dashboard_static/style/style.css
View File

@@ -102,3 +102,45 @@ body {
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;
}