前置き
今回は
レスポンシブ 対応のしやすいGrid Layout
です✨👏
簡単な使い方をご紹介🙋♀️
flex
よりも少し複雑になりますが、
慣れればできることは増えますよ❤️
続編ではflex
との違い、grid
にしかできないことを
実践形式を含めて
公開しようと思っています💕
Grid Layoutとは
縦線、横線に基づいて要素を置く
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/12/image.png?resize=648%2C530&ssl=1)
横線 = 行 = row
縦線 = 列 = column
線が縦横に
何本ずつあるかを決めて
要素を配置していきます🌟
何本目のrow
, column
かを
指定すれば良いのでflex
のorder
プロパティでは
対応し切れない
レスポンシブでの
位置変更が容易にできます❤️flex
との比較は続編にて✍️
使い方
grid-row, grid-column
このプロパティで
位置を指定します💫☝️
全体を覆うdiv
にdisplay: grid;
するのを忘れずに🪐
grid-row: 1/2;
1行目〜2行目までなので範囲はココ🍎
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/12/Frame-22-1.png?resize=415%2C347&ssl=1)
grid-column: 2/3;
2列目〜3列目なので範囲はココ🍎
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/12/Frame-22.png?resize=399%2C334&ssl=1)
なので
grid-row: 1/2;
grid-column: 2/3;
を指定した要素の位置は
ココです🍎
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/12/Frame-24-1.png?resize=407%2C339&ssl=1)
grid-gap
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/12/スクリーンショット-2020-12-11-15.51.32.png?resize=444%2C343&ssl=1)
grid-gap: 12px;
要素同士の間隔を
空けることができます☁️
grid-template-rows, grid-template-columns
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/12/スクリーンショット-2020-12-11-15.58.16.png?resize=740%2C534&ssl=1)
grid-template-rows: 100px 50px;
grid-template-columns: 150px 1fr;
1列目は100px, 2列目が50px
1行目は150px, 2列目が残りの幅です🌟
実践
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/12/スクリーンショット-2020-12-11-16.08.32.png?resize=718%2C542&ssl=1)
こちらを作ってみましょう🎈🧸
要素の間隔や、
要素の中身は
お好きな物で♪
中央配置だけしてあげてください💡
ticktack…
答え
いつも通りclass名
は
パッとみて分かりやすくするために👀
とっても安直に命名しています。
中央配置はテキストだけの想定でtext-align: center;
を使用してももちろんOKです🌷
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<template> <div class="page"> <div class="container"> <div class="box first">①</div> <div class="box second">②</div> <div class="box third">③</div> </div> </div> </template> <script> export default { } </script> <style lang="scss" scoped> .page { > .container { display: grid; grid-gap: 4px; grid-template-rows: 66px 106px; grid-template-columns: 86px 117px; > .box { display: flex; align-items: center; justify-content: center; &.first { grid-row: 1/2; grid-column: 1/2; } &.second { grid-row: 1/2; grid-column: 2/3; } &.third { grid-row: 2/3; grid-column: 2/3; } } } } </style> |
まとめ
grid
の簡単な使い方が
分かったかと思います💡
次回はflex
との違いや、
レスポンシブ対応をやる予定です!
お楽しみに❤️