グリッドをつかって画面がスマホとパソコンで分岐します
メディアクエリでgrid-template-areaを再定義しして上書してメインレイアウトとサイドレイアウトの変更を行ないますが
この再定義が長いのでもう少しスマートにできないかと悩んでいます
どなたか方法をご存知でありませんでしょうか?
<div class="top">
<div class="side">てすとあたた</div>
<div class="main">めいんてすと</div>
</div>
.top {
display: grid;
width: 500px;
height: 300px;
grid-template-areas: "side main main" "side main main"
}
.side {
grid-area: side;
background: red;
}
.main {
grid-area: main;
background: blue;
}
@media (max-width: 760px) {
.side {
display: none;
}
.top {
grid-template-areas: "main main main" "main main main";
}
}
ご教授よろしくお願いいたします