【CSS】grid周りのプロパティを毎回忘れてしまうのでまとめる

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の両方を１行で指定できる