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

⬇️前回の続きです！
【Nuxt.js】Nuxt文法編：Grid Layout①

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

簡単ver.

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

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

ticktack…

答え

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

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

* {
  border: 1px solid deepskyblue;
}

* {

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

<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>

</div>

</template>

export default {

}

</script>

.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>

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

<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>

* {

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で簡単メディアクエリ

$sp: 425px;
$tab: 768px;
$lap: 1024px;
$pc: 1200px;

@mixin sp {
  @media screen and (max-width: ($sp)) {
    @content;
  }
}

@mixin tab {
  @media screen and (max-width: ($tab)) {
    @content;
  }
}

@mixin lap {
  @media screen and (max-width: ($lap)) {
    @content;
  }
}

@mixin pc {
  @media screen and (max-width: ($pc)) {
    @content;
  }
}

$sp: 425px;

$tab: 768px;

$lap: 1024px;

$pc: 1200px;

@mixin sp {

@media screen and (max-width: ($sp)) {

@content;

}

@mixin tab {

@media screen and (max-width: ($tab)) {

@content;

}

@mixin lap {

@media screen and (max-width: ($lap)) {

@content;

}

@mixin pc {

@media screen and (max-width: ($pc)) {

@content;

}

入れ子を使用ver1. 難易度アップ🔥

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

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

<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>

</div>

</template>

Point!

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

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

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

ticktack…

答え

緑が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;

<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>

</div>

</template>

export default {

}

</script>

.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. 難易度さらにアップ🔥🔥

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

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

<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>

</div>

</template>

ticktack…

答え

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

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

<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>

</div>

</template>

export default {

}

</script>

.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の数字で
すぐに認識できるのも魅力的ですね❤️💡🤔