Closed2024/01/08にクローズ2

CSS Grid Layout の学習

そもそも、Grid とは、格子状, 碁盤目のような意味合いの英単語
(鉄)格子、(肉・魚を焼く)焼き網、(自動車の屋根の)格子状荷台、(電線・水道・ガスなどの)敷設網、送電網、(街路の)碁盤目、(地図の上に引かれた検索用の)碁盤目、グリッド

Grid Layoutは、次の6つの要素で、構成されています。

Grid Layoutの6つの構成要素

Grid Container (グリッドコンテナ): Grid Layoutの基点であり、Grid Item を Wrapする親要素。
- display: grid;またはdisplay: inline-grid;を指定することで、その要素は Grid Containerになります。
Grid Item (グリッドアイテム): Grid Containerの直接の子要素。
Grid Line (グリッドライン): グリッドの行や列を区切る直線(水平線と垂直線)。
- これらはグリッド項目のサイズや位置を決定するのに使われます。
Grid Track (グリッドトラック): 2つの隣接するGrid Line間のスペース。
- つまり、Grid Layout内の行（水平方向）または列（垂直方向）のことです。
Grid Cell (グリッドセル): 4つのグリッドラインに囲まれたグリッド内の単一のユニットのこと。
- つまり、列と行が交差して作られたセル。
Grid Area (グリッドエリア): 四つのグリッドラインによって定義される長方形の領域。
- 1つあるいは複数のセルが結合してできるセルの集まりです。
- エリアには名前を付けることができ、アイテムを配置できます。

上記の用語が、Grid Layoutを理解して、効果的に利用するための基礎となります。
これらは、ExcelのSheetをイメージしてもらうと、よりわかりやすいかもしれません。

Grid LayoutのDoc・チートシートなど

このスクラップは2024/01/08にクローズされました