모바일 사이즈에서 mediaquery 가 왜 적용이 안될까요? 똑같이 했는데도 안되네요ㅠㅠ
.grid-container { display:grid;
grid-template-columns:100px 100px 100px 100px;
grid-template-rows:100px 100px 100px;
grid-template-areas:
"header header header header"
"side content content content"
"side content content content"
;
}
.grid-container div { border:1px solid }
.grid-nav { grid-area:header;}
.grid-sidebar {grid-area:side;}
.grid-content { grid-area:content;}
@media screen and (max-width:768px){
.grid-container{
grid-template-areas:
"header header header header"
"side side side side"
"content content content";
}
}
<div class="grid-container">
<div class="grid-nav"></div>
<div class="grid-sidebar"></div>
<div class="grid-content"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
