58988


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

メディアクエリでgrid-template-areaを再定義しして上書してメインレイアウトとサイドレイアウトの変更を行ないますが  
この再定義が長いのでもう少しスマートにできないかと悩んでいます  
どなたか方法をご存知でありませんでしょうか？

[code]

    <div class="top">
        <div class="side">てすとあたた</div>
        <div class="main">めいんてすと</div>
    </div>
    
[/code]

[code]

    .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";
        }
    }
    
[/code]

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


CC BY-SA 4.0
2019-09-11T07:38:51.527
58987
2019-09-11T08:04:43.690
2019-09-11T07:42:43.160
32986
35818
question
css
Gridの表示場所を切り替えられない


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

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

  * `grid-template-columns` プロパティで `.side` の幅を 0 に指定する
[code]     .top {

      grid-template-columns: 0;
    }
    
[/code]

[code]     .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;
      }
    }
[/code]

[code]     <div class="top">

      <div class="side">てすとあたた</div>
      <div class="main">めいんてすと</div>
    </div>
[/code]

  * `grid-column` プロパティで `.main` の幅をグリッドコンテナ全体のものにする
[code]     .main {

      grid-column: 1 / -1;
    }
    
[/code]

[code]     .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;
      }
    }
[/code]

[code]     <div class="top">

      <div class="side">てすとあたた</div>
      <div class="main">めいんてすと</div>
    </div>
[/code]


CC BY-SA 4.0
2019-09-11T08:04:43.690
58988
2019-09-11T08:04:43.690
32986
58987
answer