Stack Overflow Asked on December 25, 2021
I am trying to position the ‘nav’ div below the ‘map’ div when the screen size is below 800px. I use grid-template-areas to position the elements, however when the screen shrinks the template areas are in the wrong order.
.wrapper {
display: grid;
/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
grid-template-columns: 300px 1fr;
grid-template-areas: "nav map"
}
.a {
grid-column: nav;
}
.b {
grid-column: map;
background: blue;
}
.box {
border: black 1px solid;
color: #000;
border-radius: 3px;
padding: 20px;
font-size: 14px;
}
@media only screen and (max-width: 800px) {
.wrapper {
grid-template-columns: 1fr;
grid-template-rows: 300px 1fr;
grid-template-areas: "map" "nav"
}
}<div class="wrapper">
<div class="box a">nav</div>
<div class="box b">map</div>
</div>Your have specified grid-column instead of grid-area in your classes.
.wrapper {
display: grid;
/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
grid-template-columns: 300px 1fr;
grid-template-areas: "nav map"
}
.a {
grid-area: nav;
}
.b {
grid-area: map;
background: blue;
}
.box {
border: black 1px solid;
color: #000;
border-radius: 3px;
padding: 20px;
font-size: 14px;
}
@media only screen and (max-width: 800px) {
.wrapper {
grid-template-columns: 1fr;
grid-template-rows: 300px 1fr;
grid-template-areas: "map" "nav"
}
}<div class="wrapper">
<div class="box a">nav</div>
<div class="box b">map</div>
</div>Answered by Paulie_D on December 25, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP