【React初心者メモ】grid 行や列の自動配置

gridでは、grid-cols-*とgrid-rows-*で列数と行数を指定する。
単体で指定した場合の行数と列数の自動調整が少しややこしいので、まとめておきます。

gridのみを指定した場合・・・

1列 × 自動行（要素が増えると自動的に行が追加される）

grid-cols-*のみを指定した場合・・・

*列の数 × 自動行（要素が増えると自動的に行が追加される）

grid-rows-*のみを指定した場合・・・

1列 × *行の数