🎈 この記事はWP専用です
https://wp.me/pc9NHC-W7
前置き
前回の続きです！
レスポンシブ対応を
Grid Layoutの実践形式でやります✨🙋♀️
簡単ver.
前回までの復習を含め
やってみましょう💪
幅や小要素の余白などは
つけなくてOKです⭕️
boxの中身は
中央配置をしましょう💡
ticktack…
答え
前回と同じくclass名は
分かりやすく安直に命名😃
パッと見で
gridの範囲が見にくい🤔💦
と感じたら全ての要素に
borderをつけてあげましょう🎗
* {
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>
省略するとこうなります💡
<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で簡単メディアクエリ
入れ子を使用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>
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>
入れ子を使用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>
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>
これ、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の数字で
すぐに認識できるのも魅力的ですね❤️💡🤔