CSS

【CSS】Grid Layout①

前置き

今回は
レスポンシブ 対応のしやすい
Grid Layoutです✨👏
簡単な使い方をご紹介🙋‍♀️

flexよりも少し複雑になりますが、
慣れればできることは増えますよ❤️

続編ではflexとの違い、
gridにしかできないことを
実践形式を含めて
公開しようと思っています💕


Grid Layoutとは

縦線、横線に基づいて要素を置く

横線 = 行 = row

縦線 = 列 = column

線が縦横に
何本ずつあるかを決めて
要素を配置していきます🌟

何本目のrow, columnかを
指定すれば良いので

flexorderプロパティでは
対応し切れない
レスポンシブでの
位置変更が容易にできます❤️
flexとの比較は続編にて✍️


使い方

grid-row, grid-column

このプロパティで
位置を指定します💫☝️
全体を覆うdiv
display: grid;
するのを忘れずに🪐


grid-row: 1/2;

1行目〜2行目までなので範囲はココ🍎


grid-column: 2/3;

2列目〜3列目なので範囲はココ🍎


なので

grid-row: 1/2;

grid-column: 2/3;

を指定した要素の位置は
ココです🍎


grid-gap

grid-gap: 12px;

要素同士の間隔を
空けることができます☁️


grid-template-rows, grid-template-columns

grid-template-rows: 100px 50px;

grid-template-columns: 150px 1fr;

1列目は100px, 2列目が50px
1行目は150px, 2列目が残りの幅です🌟


実践

こちらを作ってみましょう🎈🧸
要素の間隔や、
要素の中身は
お好きな物で♪
中央配置だけしてあげてください💡

ticktack…














答え

いつも通りclass名
パッとみて分かりやすくするために👀
とっても安直に命名しています。

中央配置はテキストだけの想定で
text-align: center;
を使用してももちろんOKです🌷


まとめ

gridの簡単な使い方が
分かったかと思います💡
次回はflexとの違いや、
レスポンシブ対応をやる予定です!
お楽しみに❤️

-CSS
-,

© 2021 aLiz Nuxt