Currently, I am in the process of mastering CSS grid layout design.
If you are curious to see my progress so far, check out this Codepen link showcasing my code.
Additionally, for a visual representation of the layout, feel free to view the layout image on Github.
At the moment, I am trying to add an extra row with three columns above the footer by tweaking the following CSS code sections responsible for the layout:
grid-template-areas:
"nav nav nav"
"sidebar mycover mycover"
"sidebar main content1"
/* "main main main" */ // This line seems to cause issues
"footer footer footer";
I observed that when I remove the fourth row code "main main main", everything looks fine as per the initial layout image. However, when uncommented, the entire layout crashes and appears blank. Any insights into what might be causing this issue?
Below, you can find snippets of relevant CSS and HTML code for better reference:
/* CSS Code */
body {
margin: 0px;
padding: 0px;
}
.item {
background-color: #1eaafc;
background-image: linear-gradient( 130deg, #6c52d9 0%, #1eaafc 85%, #3edfd7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #ffffff;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
}
.nav {
grid-area: nav;
}
.cover {
grid-area: mycover;
}
.sidebar {
grid-area: sidebar;
}
.content1 {
grid-area: content1;
}
.content2 {
grid-area: main;
}
.footer {
grid-area: footer;
}
.container {
border: 5px solid red;
display: grid;
width: 100%;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 1fr 1fr 100px 80px;
grid-template-areas: "nav nav nav" "sidebar mycover mycover" "sidebar main content1"
/* "main main main" */
"footer footer footer";
}<div class="container">
<div class="item nav">nav</div>
<div class="item cover">cover</div>
<div class="item sidebar">sidebar</div>
<div class="item content1">content1</div>
<div class="item content2">main</div>
<div class="item footer">footer</div>
</div>