I want to use the below mentioned Grid Layout for my blog page but the problem is that I am facing problem to make this grid layout responsive using media query. I want the sidebar to appear below the content section-2 when the device width is less than 700px.
I've tried the "repeat, fr, percentage" but none of them are working.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-section {
display: grid;
grid-template-rows: 70px auto;
grid-template-columns: 70% 30%;
grid-gap: 1rem;
height: 100vh;
overflow: hidden;
}
#content-section-1 {
background-color: #9F5C77;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 2;
}
#content-section-2 {
background-color: #897BF6;
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 2;
}
#sidebar-section {
background-color: #879A5E;
grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 3;
}
@media only screen and (max-width: 700px) {
.main-section {
/*** grid-template-columns: repeat(1, 100%); NOT WORKING ***/
/*** grid-template-columns: 100%; NOT WORKING ***/
/*** grid-template-columns: 1fr no-repeat; NOT WORKING ***/
}
}<div class="main-section">
<div id="content-section-1">Content Section-1 (Fixed Height)</div>
<div id="content-section-2">Content Section-2 (Auto Height)</div>
<div id="sidebar-section">SideBar Section (Auto Height)</div>
</div>