CSSのGridデザインを勉強していると、Containerとかitemとか色々と出てきます。

これは、定められた仕様なのか？というところは最初悩むと思います。

ですんで、簡単にまとめたいなと思っていました。

CSS-Tricks

 

47 Users

9590 Pockets

A Complete Guide to Grid | CSS-Tricks

https://css-tricks.com/snippets/css/complete-guide-grid/

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

こちらの記事がとても分かりやすいのですが、英語なんで、分かりずらい人がいるかもしれません。

ですので、かいつまんでお届けします。

CSSのGridデザインで使われる重要な用語解説

Gridの概念を理解する前に、用語を理解することが重要です。

ここで出てくる用語はどれも概念的には似ているので、

グリッドの仕様書で定義されている意味を覚えておかないと、

簡単に混同してしまいます。

でも、心配しないでください、そんなに数はありません。

Grid Container

display: gridが適用される要素です。

すべてのグリッドアイテムの直接の親となります。

この例では、コンテナがグリッドコンテナです。

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

Grid Item

グリッドコンテナの子（つまり直系の子孫）です。

ここでは、item要素はグリッドアイテムですが、

sub-itemはそうではありません。

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Grid Line

グリッドの構造を構成する仕切り線。縦方向（コラムグリッドライン）と、

横方向（ロウグリッドライン）があり、

行または列のどちらか一方に存在します。

ここでは、黄色の線が列格子線の例です。

Grid Cell

隣接する2本の行と2本の列のグリッド線の間のスペースです。

グリッドのひとつの「単位」であり、

ここでは、行のグリッドライン1と2、列のグリッドライン2と3の間にあるグリッドセルを示しています。

Grid Track

隣接する2本のグリッドラインの間のスペース。

グリッドの列や行のようなものだと考えればいいでしょう。

ここでは、2列目と3列目のグリッド線の間にあるグリッドトラックを紹介します。

Grid Area

4本のグリッドラインで囲まれた総ての空間。グリッドエリアは、任意の数のグリッドセルで構成することができます。ここでは、行グリッド線1と3、列グリッド線1と3の間にあるグリッドエリアを紹介します。