【CSS】Grid Layout 基礎②レスポンシブ対応

🎈 この記事はWP専用です
https://wp.me/pc9NHC-W7

#前置き
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/db0fca2e-51fd-40b1-4a94-f9e1593661b2.png)

前回の続きです！
レスポンシブ対応を
Grid Layoutの実践形式でやります✨🙋‍♀️

[Grid Layout①](https://qiita.com/aLiz/items/ab5598fcf4cbca267563)

#簡単ver.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/31a66309-0236-315f-6b81-c16eefbc5df2.png)

前回までの復習を含め
やってみましょう💪

幅や小要素の余白などは
つけなくてOKです⭕️
boxの中身は
中央配置をしましょう💡

ticktack…







##答え

前回と同じくclass名は
分かりやすく安直に命名😃

パッと見で
gridの範囲が見にくい🤔💦
と感じたら全ての要素に
borderをつけてあげましょう🎗

```index.vue
* {
 border: 1px solid deepskyblue;
}
```
grid-columnが全て同じになるので
あとはgrid-rowを
それぞれ上から指定すればOKです✳

ちなみに1/2, 2/3, 3/4など
隣の数字を使う場合は
省略して開始地点のみの記載でOK⭕️
1/2 → 1
2/3 → 2
3/4 → 3

```index.vue
<template>
 <div class="page">
   <div class="container">
     <div class="box first">1</div>
     <div class="box second">2</div>
     <div class="box third">3</div>
   </div>
 </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
 .page {
   > .container {
     display: grid;

     > .box {
       display: flex;
       align-items: center;
       justify-content: center;

       &.first {
         grid-row: 1/2;
         grid-column: 1/2;

         @include sp {
           grid-row: 1/2;
           grid-column: 1/2;
         }
       }

       &.second {
         grid-row: 1/2;
         grid-column: 2/3;

         @include sp {
           grid-row: 2/3;
           grid-column: 1/2;
         }
       }

       &.third {
         grid-row: 2/3;
         grid-column: 2/3;

         @include sp {
           grid-row: 3/4;
           grid-column: 1/2;
         }
       }
     }
   }
 }
</style>
```

省略するとこうなります💡

```index.vue
<style lang="scss" scoped>
 * {
   border: 1px solid deepskyblue;
 }
 .page {
   > .container {
     display: grid;

     > .box {
       display: flex;
       align-items: center;
       justify-content: center;

       &.first {
         grid-row: 1;
         grid-column: 1;

         @include sp {
           grid-row: 1;
           grid-column: 1;
         }
       }

       &.second {
         grid-row: 1;
         grid-column: 2;

         @include sp {
           grid-row: 2;
           grid-column: 1;
         }
       }

       &.third {
         grid-row: 2;
         grid-column: 2;

         @include sp {
           grid-row: 3;
           grid-column: 1;
         }
       }
     }
   }
 }
</style>
```

⬇️メディアクエリについては
　こちらをご覧ください✨👀
[【Nuxt.js】mixin実践編：Sass & mixinで簡単メディアクエリ](https://qiita.com/aLiz/items/f3bfb24bfc7687a5408a)

#入れ子を使用ver1. 難易度アップ🔥
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/ba35965a-37aa-64bd-9acc-e88dbef5c40b.png)

入れ子を使用した使い方です❗️

1がテキストで
2, 3がそれに対応する画像だとします📸
2, 3をdivで囲って
imgというclass名をつけたいです💡
テンプレートはこうなりますね💭

```index.vue
<template>
 <div class="page">
   <div class="container">
     <div class="box first">①</div>
     <div class="box img">
       <div class="box second">②</div>
       <div class="box third">③</div>
     </div>
   </div>
 </div>
</template>
```

**Point!**

div containerに
display: grid;をつけていますが、
効くのは直下の
firstとdiv imgのみです🌀

secondとthirdもgridにしたいので
div imgにもdisplay: grid;をつけます💫☝️
それぞれ開始地点は
親のdiv imgに依存しますね🤔

幅はそれぞれ100pxずつにしましょう🌟

 ticktack…

##答え

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/c9a09cab-f407-4662-1318-7881f0875378.png)

緑がdiv imgです🍀

⬅️左の図
親のconteinerから
見た場合の位置は
grid-row: 1/3;
grid-column: 2/3;
ですね💡

➡️右の図
自分が親の場合
2つの小要素の位置は
これを元に決めます❗️

grid-row: 1/2;
grid-column: 1/2;

grid-row: 2/3;
grid-column: 1/2;

```index.vue
<template>
  <div class="page">
    <div class="container">
      <div class="box first">①</div>
      <div class="box img">
        <div class="box second">②</div>
        <div class="box third">③</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .page {
    > .container {
      display: grid;
      grid-template-rows: 100px 100px;
      grid-template-columns: 100px 100px;

      @include sp {
        grid-template-rows: 100px 100px 100px;
        grid-template-columns: 100px;
      }

      > .box {
        display: flex;
        align-items: center;
        justify-content: center;

        &.first {
          grid-row: 1/2;
          grid-column: 1/2;

          @include sp {
            grid-row: 1/2;
            grid-column: 1/2;
          }
        }

        &.img {
          grid-row: 1/3;
          grid-column: 2/3;
          display: grid;
          grid-template-columns: 100px;

          > .box {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
          }

          @include sp {
            grid-row: 2/4;
            grid-column: 1/2;
          }

          > .second {
            grid-row: 1/2;
            grid-column: 1/2;

            @include sp {
              grid-row: 1/2;
              grid-column: 1/2;
            }
          }

          > .third {
            grid-row: 2/3;
            grid-column: 1/2;

            @include sp {
              grid-row: 2/3;
              grid-column: 1/2;
            }
          }
        }
      }
    }
  }
</style>
```

#入れ子を使用ver2. 難易度さらにアップ🔥🔥

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/02301529-be0b-bc63-a955-eb52762ca81c.png)

今度はdiv imgの間に
テキストが入り込みます💥🧱

テンプレートは変わらずこちらです❗️

```index.vue
<template>
  <div class="page">
    <div class="container">
      <div class="box first">①</div>
      <div class="box img">
        <div class="box second">②</div>
        <div class="box third">③</div>
      </div>
    </div>
  </div>
</template>
```

 ticktack…

##答え

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/0eeaf571-e5d0-0be2-131e-be5add63c880.png)

div imgの中に
1を入れるなんて無理なのでは❓
と思った方がいらっしゃるかもしれません。
flexに慣れている方は特に❗️
が、gridならできるんです❣️

図の通り、
gridとは線の本数を決めてから
要素を置くやり方なので…
簡単にできてしまうんです❤️🧸

```index.vue
<template>
  <div class="page">
    <div class="container">
      <div class="box first">①</div>
      <div class="box img">
        <div class="box second">②</div>
        <div class="box third">③</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .page {
    > .container {
      display: grid;
      grid-template-rows: 100px 100px;
      grid-template-columns: 100px 100px;

      @include sp {
        grid-template-rows: 100px 100px 100px;
        grid-template-columns: 100px;
      }

      > .box {
        display: flex;
        align-items: center;
        justify-content: center;

        &.first {
          grid-row: 1/2;
          grid-column: 1/2;

          @include sp {
            grid-row: 2/3;
            grid-column: 1/2;
          }
        }

        &.img {
          grid-row: 1/3;
          grid-column: 2/3;
          display: grid;
          grid-template-rows: 100px 100px;
          grid-template-columns: 100px;

          @include sp {
            grid-row: 1/4;
            grid-column: 1/2;
          }

          > .box {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
          }

          > .second {
            grid-row: 1/2;
            grid-column: 1/2;

            @include sp {
              grid-row: 3/4;
              grid-column: 1/2;
            }
          }

          > .third {
            grid-row: 2/3;
            grid-column: 1/2;

            @include sp {
              grid-row: 1/2;
              grid-column: 1/2;
            }
          }
        }
      }
    }
  }
</style>
```

これ、flexではかなり無理があります💦

⭕️できること
display: flex;をあてた親要素が
同じ場合の要素同士

containerの直下first, div imgを入れ替える、
div imgの直下second, thirdを入れ替える

➡️orderやflex-directionプロパティを使用

❌できないこと
display: flex;をあてた親要素が
違うもの同士

containerの直下firstと
div imgの直下second, thirdの入れ替えは
親が違うので不可

➡️2, 3の間にpaddingをつくって
　1をpositionで
　無理やり入れることになる😨
　というのは想像がつくかと思います💡

#まとめ
コツさえ掴めば
レスポンシブ対応がしやすいことが
分かったかと思います💕

flexも便利ですが、
要素の位置がCSSの数字で
すぐに認識できるのも魅力的ですね❤️💡🤔