自分用にまとめたものです。
主に、MDNなどを読むときの用語まとめになりました。
Gridレイアウトとは
Flexとの違い
flexは1次元。基本、1列 or 1行。
それに対して、gridは二次元。縦横に行と列を作ってレイアウトできる。
はるか昔の遺産、tableレイアウトを想像してもらえれば。
Gridの構成
Gridコンテナ
後述するグリッドアイテムの直接の親要素。
display: grid
を設定することで、コンテナとして扱われる。
GridトラックとGridライン
グリッドトラックは2つのグリッドラインの間の領域の事。
トラックは、grid-template-columns
grid-template-rows
とそのショートハンドで定義されます。
ラインは、トラックが定義される事で作成されます。
Gridアイテム
グリッドコンテナの直接の子要素。
グリッドコンテナに設定するstyleによって、アイテムのレイアウトが決定される。
参考
CSS グリッドレイアウト
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout