0

グリッドをつかって画面がスマホとパソコンで分岐します

メディアクエリで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";
    }
}

ご教授よろしくお願いいたします

1 件の回答 1

1

レイアウトの変化が複雑である場合は、 grid-template-column プロパティを上書きする方法がもっとも簡単な方法だと思います。

ただし、今回の場合、メディアクエリ内で .sidedisplay: none を適用した上で、以下の 2 つのどちらかの方法によってよりコードを短く出来ます。

  • grid-template-columns プロパティで .side の幅を 0 に指定する

    .top {
      grid-template-columns: 0;
    }
    

    .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-columns: 0;
      }
    }
    <div class="top">
      <div class="side">てすとあたた</div>
      <div class="main">めいんてすと</div>
    </div>

  • grid-column プロパティで .main の幅をグリッドコンテナ全体のものにする

    .main {
      grid-column: 1 / -1;
    }
    

    .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;
      }
      .main {
        grid-column: 1 / -1;
      }
    }
    <div class="top">
      <div class="side">てすとあたた</div>
      <div class="main">めいんてすと</div>
    </div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。