CSSのgrid周りのプロパティを毎回忘れてしまうので、自分なりに見返せるようにまとめる
grid-template-columns
行の数と幅を定義
// 左から200px、auto、100pxの幅を持つ grid-template-columns: 200px auto 100px; //1frの幅を３回繰り返す grid-template-columns: repeat(3, 1fr); // 画面幅に合わせて繰り返す、このとき幅が350px以上、1fr以下になるようにする grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-template-rows
列の数と高さを定義
grid-template-columnsを同じ考え方
grid-template-areas
グリッド内でセルを確立し、名前を割り当てることにより、名前付きの グリッド領域 を定義
親要素に以下を定義し、
grid-template-areas:
"head head"
"nav main"
"nav foot";
子要素にgrid-area: head;やgrid-area: nav;、grid-area: main;などをそれぞれ定義すると、上のレイアウトに配置される
１行ずつ 行の高さを、最後に「/」で区切って列の幅を書くこともできる
grid-template-areas:
"head head" 80px
"nav main" 80px
"nav foot";
/ 130px 130px
grid-column
グリッド列の中における子要素の寸法と位置を定義する
grid-column: 1 / 3; 1軸目と3軸目に挟まれた２格子分 ■■□□□□ grid-column: 3 / span 3; 1軸目から右に３格子分 □□■■■□ grid-column: span 2 / 4; ２格子分の右端が4軸目になる □■■□□□
grid-row
グリッド行の中における子要素の寸法と位置を定義する
grid-columnと同じ考え方
grid-auto-flow 自動配置されたアイテムがどのようにグリッドに流れ込むかを正確に指定するもの
// 上から順に行にスペースがあれば埋め、スペースがなければ新しい行を作る grid-auto-flow: row; // 左から順に列にスペースがあれば埋め、スペースがなければ新しい列を作る grid-auto-flow: column; // 上から順に行にスペースがあれば埋め、スペースがなければグリッドアイテムの大きさの都合により生じた空きスペースに埋め込まれる、スペースがなければ新しい行を作る grid-auto-flow:row dense; // 左から順に列にスペースがあれば埋め、スペースがなければグリッドアイテムの大きさの都合により生じた空きスペースに埋め込まれる、スペースがなければ新しい列を作る grid-auto-flow: column dense;
grid
gridプロパティを一括にまとめるショートハンド
構文は３つ
- <'grid-template'>
これはgrid-templateショートハンドの書き方と同じで、grid: <'grid-template-areas'>の指定もしくは、grid: <'grid-template-rows'> / <'grid-template-columns'>と書く
grid:
"head head"
"nav main"
"nav foot";
grid: repeat(3, 200px) / repeat(3, 200px);
- <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
これは行の高さを明示的に指定し、列を自動的に配置する場合に使う
grid: repeat(3, 200px) / auto-flow;
- [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
これは列の幅を明示的に指定し、行を自動的に配置する場合に使う
grid: auto-flow / repeat(3, 200px);
place-*
align-*とjustify-*の両方を１行で指定できる
grid-template
grid-template-columnsとgrid-template-rowsの両方を１行で指定できる
