css- grid

📌 grid

*gridはもともとFirefoxでしかサポートされておらず、2022年4月以降Chromeでも開発者ツールで確認できます。IEでは使用できません。（IE 10と11をサポート）

float、flexとともにレイアウトの最適なツールの1つとして使用されます。

📌 メッシュフレームの作成

1)コンテナに表示="grid/inline-grid"

2)grid-template-rows(行の作成)/grid-template-column(列の作成)

✔ grid-template-columns: 200px 200px 500px; --> 3列をそれぞれ固定値に指定

✔ grid-template-columns: 1fr 1fr 1fr; --> 3列をfrとして1:1:1の割合で指定します。

✔ grid-template-columns:100px 1fr 2fr; --> 固定値と可変値を混合して使用できます。

✔ grid-template-columns: repeat(5, 1fr); --> repeat(繰り返し回数、繰り返し値)-->5つの列をそれぞれ1 frに設定!

✔grid-template-columns：minmax（最高値、最低価格）-->minmax（100 px、auto）の意味は少なくとも100 px、最大値はauto

✔grid-template-columns:minmax(最上昇値、最低価格)

📌 メッシュクリアランスサイクル

✔row-gap✔column-gap✔grid-gap/gap p->row/column同時

📌 セルの範囲の指定(グリッド線ベース)

✔column grid-column-start:開始行番号grid-column-end終了行番号grid-column:開始行番号/終了行番号

✔row grid-row-start:開始行番号grid-row-end終了行番号grid-row:開始行番号/終了行番号

📌 row/columnの個数を予め決めておかないと?

✔ grid-auto-columns ✔ grid-auto-rows

grid-auto-rows: minmax(100px, auto);