CSS

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

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

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


簡単ver.

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

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

ticktack…













答え

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

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

grid-columnが全て同じになるので
あとはgrid-row
それぞれ上から指定すればOKです✳

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

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

⬇️メディアクエリについては
 こちらをご覧ください✨👀
【Nuxt.js】mixin実践編:Sass & mixinで簡単メディアクエリ


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

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

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


Point!

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

secondthirdgridにしたいので
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;


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

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

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

ticktack…










答え

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

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

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

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

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

➡️orderflex-directionプロパティを使用

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

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

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


まとめ

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

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

-CSS
-,

© 2021 aLiz Nuxt