ひとりCSS Advent Calendar 2022 3日目です。
Grid Layoutを学び直します。
Grid Layout にするには
親要素に display: grid; を指定すればできる。
サンプル
<div class="parent">
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
</div>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
親要素に指定できるプロパティ
名前でサイズと位置を決めたいとき
grid-template-areas は、あらかじめ子要素に grid-area で名前をつけておく必要がある。
名前をもとにレイアウトを決められるので、コンテンツが入る一番外側のレイアウトを作るときに便利。
サイズで決めたいとき
- 基本のサイズ指定
-
grid-template-columns- 横方向のサイズの指定 -
grid-template-rows- 縦方向のサイズの指定
-
- 子が溢れたときの指定
-
grid-auto-columns- 横方向の暗黙的なサイズの指定 -
grid-auto-rows- 縦方向の暗黙的なサイズの指定
-
- サイズの指定方法
- 数字
-
auto- 子要素しだい -
1fr- 1frはひとマス分。- fr は fraction(分数の意味)の略らしい。
-
repeat- 繰り返しで指定できる-
repeat(3, 1fr)なら 1fr のサイズの子要素3つ分という指定。
-
-
minmax- 最小値と最大値の指定-
minmax(100px, auto)なら最小値が100px、最大値は auto という指定。
-
- 余白
-
column-gap- 横方向の余白 -
row-gap- 縦方向の余白 -
gap- 余白のショートハンド- 2つ値を与えるときは
gap column半角空白を間に入れて、たて よこの順。
- 2つ値を与えるときは
- 過去は
grid-column-gapのように頭にgrid-がついていた。今はつけてもつけなくてもOKらしい。
-
配置を決めたいとき
-
place-items- 子要素の配置を決められるショートハンド-
align-items,justify-items半角スペース区切りで指定する -
place-items: centerで上下左右中央配置ができる
-
子要素に指定できるプロパティ
要素に名前をつけたいとき
grid-area
- 例えば、
grid-area: header;grid-area: main;grid-area: sidebar;とか - 名前をつけてわかりやすくできる。値にはダブルクオーテーションは不要。
- コンテンツが入る一番外側のレイアウトを作るときに便利。
大きさの指定
- ショートハンド - スラッシュで区切って書く
-
grid-column- 横方向の指定 -
grid-row- 縦方向の指定 - 例えば、
grid-column: 1/-1なら左端から右端まで- 最小値は
1 - マイナス値は逆方向から数えた位置
- 最小値は
-
- マス目（グリッド）で大きさを指定する
-
grid-column-start横方向の開始位置 -
grid-column-end横方向の終了位置 -
grid-row-start縦方向の開始位置 -
grid-row-end横方向の終了位置
-
遊んでみた
See the Pen Flexbox by Beco (@becolomochi) on CodePen.
↓こういうレイアウトも作れて楽しい
感想
- たのしい
- いろいろなプロパティが多く難しい
- が、実装するなら使用するプロパティは限られてくる（多分。。）
- まずやりたいレイアウトからどれを使えば想定した実装になるか逆算して作ると良さそう