CSSにおけるグリッド
CSSグリッド機能を使用できるようにするCSSプロパティ
新着！私の44ページの電子書籍「CSS in 44 minutes」が発売されました！ 😃
#grid-area
grid-row-start、grid-column-start、grid-row-end、およびgrid-column-end の省略記法プロパティです。
デフォルト grid-area: auto;
グリッドアイテムの列と行の開始と終了は自動的に設定されます。
grid-area: main;
領域名を使用できます。
#grid-auto-columns
暗黙的に作成されたグリッド列のサイズを定義します。つまり、grid-auto-columnsは、grid-template-columnsまたはgrid-template-areasで定義され*なかった*列を対象とします。
デフォルト grid-auto-columns: auto;
暗黙的に作成された列はautoサイズになります。
grid-auto-columns: 100px;
ここでは、grid-template-areas: "header header header" "sidebar main main"とgrid-template-columns: 50px 200pxを組み合わせます。
この場合、grid-template-areasは3列を定義しますが、grid-template-columnsは2列の幅しか定義しません。
その結果、3列目の幅はgrid-auto-columnsプロパティの値、つまり100pxになります。
#grid-auto-flow
自動生成されたグリッドアイテムの位置を定義します。
デフォルト grid-auto-flow: row;
ここでは、grid-template-areas: "header header header" "sidebar main main" "footer footer footer"に加えて、追加の「Other」グリッドアイテムがあります。アルゴリズムはそれを独自の行に配置します。
grid-auto-flow: column;
ここでは、grid-template-areas: "header header header" "sidebar main main" "footer footer footer"に加えて、追加の「Other」グリッドアイテムがあります。アルゴリズムはそれを独自の列に配置します。
#grid-auto-rows
暗黙的に作成されたグリッド行のサイズを定義します。つまり、grid-auto-rowsは、grid-template-rowsまたはgrid-template-areasで定義され*なかった*行を対象とします。
デフォルト grid-auto-rows: auto;
暗黙的に作成された行はautoサイズになります。
grid-auto-rows: 100px;
ここでは、grid-template-areas: "header header header" "sidebar main main" "footer footer footer"とgrid-template-rows: 50px 200pxを組み合わせます。
この場合、grid-template-areasは3行を定義しますが、grid-template-rowsは2行の高さしか定義しません。
その結果、3行目（フッター）の高さはgrid-auto-rowsプロパティの値、つまり100pxになります。
#grid-column-end
グリッドアイテムの列の終端位置を定義します。
デフォルト grid-column-end: auto;
この3列構成では、グリッドアイテムは自動的に配置されます。
grid-column-end: 2;
対象のグリッドアイテムは、2番目の列の手前で終了します。
grid-column-end: 1;
対象のグリッドアイテムは1番目の列の手前で終了し、自動的に4番目の列が作成されます。
#grid-column-gap
グリッドコンテナの列間のガターを定義します。
デフォルト grid-column-gap: 0;
ギャップを削除します。
grid-column-gap: 10px;
ピクセル値を使用できます。
grid-column-gap: 3rem;
(r)em値を使用できます。
grid-column-gap: 20%;
パーセンテージ値を使用できます。
#grid-column-start
グリッドアイテムの列の開始位置を定義します。
デフォルト grid-column-start: auto;
この3列構成では、グリッドアイテムは自動的に配置されます。
grid-column-start: 2;
対象のグリッドアイテムは2番目の列に配置されます。
grid-column-start: 4;
対象のグリッドアイテムはグリッドの外側、自動生成された4番目の列に配置されます。
#grid-column
grid-column-startとgrid-column-endの簡略表記プロパティです。
デフォルト grid-column: auto auto;
グリッドアイテムの列の開始と終了は自動的に設定されます。
grid-column: 1 / 3;
グリッドアイテムは1列目の前で始まり、3列目の前で終了します。
grid-column: span 3;
グリッドアイテムは3列にまたがります。
grid-column: 1 / span 4;
グリッドアイテムは1列目の前で始まり、4列にまたがり、その過程で新しい列が作成されます。
grid-column: main;
エリア名を使用して、列の開始と終了の位置を「コピー」できます。
#grid-gap
grid-row-gapとgrid-column-gapの簡略表記プロパティです。
デフォルト grid-gap: 0 0;
行と列のギャップの両方を削除します。
grid-gap: 10px;
単一値を設定できます。
grid-gap: 3rem 1rem;
それぞれの方向に値を設定できます。行を先に、列を後に設定します。
#grid-row-end
グリッドアイテムの行の終端位置を定義します。
デフォルト grid-row-end: auto;
この3列構成では、グリッドアイテムは自動的に配置されます。
grid-row-end: 3;
対象のグリッドアイテムは3番目の行の手前で終了します。
grid-row-end: 4;
対象のグリッドアイテムは4番目の行の手前で終了し、自動的に3番目の行が作成されます。
#grid-row-gap
グリッドコンテナの行間のガターを定義します。
デフォルト grid-row-gap: 0;
ギャップを削除します。
grid-row-gap: 10px;
ピクセル値を使用できます。
grid-row-gap: 3rem;
(r)em値を使用できます。
#grid-row-start
グリッドアイテムの行の開始位置を定義します。
デフォルト grid-row-start: auto;
この3列構成では、グリッドアイテムは最初の行に自動的に配置されます。
grid-row-start: 2;
対象のグリッドアイテムは2番目の行に配置されます。
grid-row-start: 3;
対象のグリッドアイテムはグリッドの外側、自動生成された3番目の行に配置されます。
#grid-row
grid-row-startとgrid-row-endの簡略表記プロパティです。
デフォルト grid-row: auto auto;
グリッドアイテムの行の開始と終了は自動的に設定されます。
grid-row: 1 / 3;
グリッドアイテムは1行目の前で始まり、3行目の前で終了します。
grid-row: span 3;
グリッドアイテムは3行にまたがります。
grid-row: 1 / span 4;
グリッドアイテムは1行目の前で始まり、4行にまたがり、その過程で新しい行が作成されます。
grid-row: header;
エリア名を使用して、行の開始と終了の位置を「コピー」できます。
#grid-template-areas
グリッドコンテナ内のエリアを定義します。これらのエリアは、グリッドアイテムを配置する際に参照できます。
デフォルト grid-template-areas: none;
エリアは定義されていません。
grid-template-areas: "header header header" "sidebar main main";
エリア名を使用して、各グリッドアイテムが占めるセルを指定できます。
#grid-template-columns
グリッドコンテナの列を定義します。列の幅は、キーワード（autoなど）または長さ（10pxなど）を使用して指定できます。列の数は、スペースで区切られたリストで定義された値の数によって決まります。
デフォルト grid-template-columns: none;
列は定義されていないため、1つしかありません。
grid-template-columns: auto auto auto;
キーワードautoを使用すると、各列が自動的にサイズ変更されます。
grid-template-columns: 80px auto 1rem;
単位を混在させることができます。
grid-template-columns: 40px 1fr 2fr;
frフレックス単位を使用して、残りのスペースをすべてのフレックス列に分散できます。
#grid-template-rows
グリッドコンテナの行を定義します。行の幅は、キーワード（autoなど）または長さ（10pxなど）を使用して指定できます。行の数は、スペースで区切られたリストで定義された値の数によって決まります。
デフォルト grid-template-rows: none;
行は定義されていません。
grid-template-rows: 120px auto 3rem;
単位を混在させることができます。
grid-template-rows: 20px 1fr 2fr;
frフレックス単位を使用して、残りのスペースをすべてのフレックス行に分散できます。
#grid-template
grid-template-rows、grid-template-columns、およびgrid-template-areaの省略記法プロパティです。
デフォルト grid-template: none;
行、列、領域は定義されていません。
grid-template: 200px 1fr / 100px auto 3rem;
スラッシュ/で区切ることで、先に行、次に列を定義できます。
grid-template: "header header header" 50px "sidebar main main" 200px / 100px auto;
領域と行および列の寸法の両方を定義できます。この場合、各領域セットには行サイズが添付されています。最初の行の高さは50px、2番目の行の高さは200pxです。サイドバー列の幅は100pxで、メイン列の幅はautoに設定され、残りの幅を占めます。
#grid
grid: "header header header" 50px "sidebar main main" 200px / 100px auto;
すべての明示的な行、列、領域を設定することで、grid-templateとして使用できます。
grid: 200px 100px / auto-flow 30%;
grid-template-rowsとgrid-auto-columnsを組み合わせることができます。
grid: auto-flow 50px / 200px 100px;
grid-auto-rowsとgrid-template-columnsを組み合わせることができます。