Currently, I am delving into CSS grid, encountering a peculiar issue along the way. I'm in the process of constructing a basic grid consisting of five areas - Header, Main, Footer, left sidebar, and right sidebar. Everything seems to be functioning smoothly until I resize the grid, at which point the right sidebar inexplicably shifts beneath the grid on the right side. Here is the code snippet:
<div class="container">
<div class="red_box left-bar box"><h2>On left</h2></div>
<div class="green_box header box">Header</div>
<div class="orange_box right-bar box"><h2>On right</h2></div>
<div class="coral_box main box">Main</div>
<div class="blue_box bottom box"><h2>Footer</h2></div>
</div>
If you want to view the CodePen demo showcasing this issue, click here. To clarify, after applying the media query, my objective is for only the Header, Middle, and Footer sections to be visible.
Here is the corresponding CSS code:
.container{
display:grid;
grid-template-columns:auto;
grid-template-rows:auto;
grid-template-areas:
"leftbar header header header rightbar"
"leftbar middle middle middle rightbar"
"leftbar middle middle middle rightbar"
"leftbar middle middle middle rightbar"
"leftbar middle middle middle rightbar"
"leftbar middle middle middle rightbar"
"footer footer footer footer footer";
height:400px;
}
.box{
border:1px solid black;
width:100%;
height:100%;
text-align:center;
}
.right-bar{
grid-area:rightbar;
}
.left-bar{
grid-area:leftbar;
}
.header{
grid-area:header;
}
.main{
grid-area:middle;
}
.bottom{
grid-area:footer;
}
.red_box{
background-color:red;
}
.orange_box{
background-color:orange;
}
.blue_box{
background-color:blue;
}
.green_box{
background-color:green;
}
.coral_box{
border:1px solid black;
background-color:coral;
width:100%;
height:100%;
text-align:center;
}
@media (max-width:1000px){
.container{
grid-template-areas:
"header header header"
"middle middle middle"
"middle middle middle"
"middle middle middle"
"middle middle middle"
"middle middle middle"
"footer footer footer";
}
}