【CSS】グリッドレイアウトの使い方について調べてみた①~用語編~【grid】

2024/09/11 2024/09/29 更新 Web

いろいろなところでけっこう使われている CSS Grid Layout Module。日本語では「グリッドレイアウト」ででしょうか！（頭に CSS がついていた方が“デザイン”におけるグリッドとして区別できますが、本記事では「グリッドレイアウト」で統一することにします。）

個人的に「グリッドレイアウト」と言えば「フレックスボックス」と双璧をなすレイアウトシステムというイメージがあります。勉強する順番は、多くの参考書などで先に「フレックスボックス」から入るのではないしょうか。何となく「グリッドレイアウト」のほうが難しいという先入観があります。そして、、、「フレックスボックス」だけでも初歩的な Web デザインであれば実現できてしまうので、ついついあとまわしにしてしまい今に至ります。（私だけ？？）

ですので、今回ちゃんと「グリッドレイアウト」について学んでいきたいと思います。

という感じででしたが、記事をまとめていて長くなってしまったため、記事をいくつかに分割することにしました。今回は～用語編～ということで「グリッドレイアウト」の用語について主にまとめてみました。

grid の意味は？

grid（グリッド）の意味は、「格子」や「碁盤目」、あるいはそのまんま「グリッド」です。そこそこ聞きなれているワードではありますが、改めて。

単語

grid：格子、碁盤目、グリッド（weblio）

名前からして、「グリッドレイアウト」は、グリッド状にレイアウトできるものなのだなぁっと予想できますよね。

グリッドレイアウトを
構成するものの
各用語

「グリッドレイアウト」を使うにには、先にグリッドレイアウトを構成するものの各用語を知ることが勉強し始める上で大切なのかなと思います。いろいろな参考書や参考サイトをスムーズに読み解けるようになり、効率アップにもつながるので、何はともあれ、まずは先に用語を覚えちゃいましょう！

なお、各用語は公式のW3Cを参考にしています。

グリッドコンテナ（Grid Container）と
グリッドアイテム（Grid Item）

グリッドレイアウトの親要素は「グリッドコンテナ（grid container）」（参考：W3C）と呼ばれ、その子要素が「グリッドアイテム（grid item）」（参考：W3C）と呼ばれます。ちなみに親要素にdisplay: grid;（またはdisplay: inline-grid;）を記述することで、そのかたまりは「グリッドレイアウト」という存在になり、そのような概念になります（←何言ってるかよくわからないので雰囲気で感じろっ！）。

こちらの概念はフレックスボックスでもお馴染みですね！

グリッドライン（Grid Line）

グリッドラインは、グリッドを水平（horizontal）または垂直（vertical）に分けている境界のことです。それぞれのラインは左から右、上から下に向かって番号順で識別することができます（正しくは書式の方向）。

グリッドトラック（Grid Track）

グリッドトラックは、グリッドの列（colmun）or 行（row）の総称のことです。言い換えると、2本のグリッドラインの間のスペースのことです。（W3C）

文章にすると少しややこしいですがそんなに深く考えないで、下図の通りに感じてよいかと思います。

track の意味は、
「（車・船などの）通った跡」、「踏み鳴らした道」など、“道”っぽいニュアンスなのですがイマイチピンときませんね！イメージしづらければそのまま覚えてしまいましょう！（weblio）

陸上の長距離走などのトラックとか、音楽のトラックナンバーとか、録音“データ”とかのトラックとか、、、その辺の由来は同じみたいではあります。ちなみにあの乗り物のトラック（truck）とは別物です！

グリッドセル（Grid Cell）

こちらは“エクセル”とかでもお馴染みのセル（細胞）って感じですんなり理解できますね！一応、公式の説明としては、グリッドの行と列の交差点とのことで、グリッドアイテムを配置する際に参照できる最小単位とのことです。（W3C）

グリッドエリア（Grid Area）

グリッドエリアは、一つ以上のグリッドセルのかたまりでつくられたエリアのことです。正しくは、「レイアウトで使用する『ロジカルスペース』」とのことらしいです。（W3C）

『ロジカルスペース』というワードに関しては、正直なところ、私にはどういうニュアンスなのか分かりませんでした。“グリッドアイテムを配置するとき”に関わってくるのかなぁと思ったり思わなかったり、、。グリッドエリアには名前を付けることができて、アイテムを配置するときにその名前を参照して配置することができたりするので、そういう関係で『ロジカルスペース』などと説明されているのかなぁと思いました。

とにかく今は、用語だけおさえておくことにします。

fr という単位

グリッドレイアウトにおいて、よく「fr」という単位が使用されます。fr は、fraction（フラクション）の略だと思われます。意味は「断片」、「分数」などです。（weblio）

単位としては、日本語にとらわれずに“分割されたスペース”くらいの感じでふわっと頭の片隅に入れておくのがオススメです。というのも、３つ以上の数値を値に入れたり、他の単位とも併用したりするので必ずしも「分数」というわけでもなさそうなのです。固く考えすぎるとドツボにハマってしまうのだ！

使いどころは、grid-template-columns や grid-template-rows プロパティの値で使用します。

fr のみ使用

単位を fr のみで使用する場合は、特に難しくはありません。１つ以上の値をスペースで区切り記述することで、列（column）や行（row）のトラックをその比率で分けることができます。

例えば下記のような使い方をします。

.grid__container{
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr;  
}

この場合は、列（column）を 1 : 2 : 1 の比率で分けて、行（row）は１（あえて“flaction”で説明するのであれば“１分の１”）というスタイルです。

他の単位と併用

fr と他の単位と併用する場合は、残りのスペースを fr で分割します。

.grid__container{
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  grid-template-rows: 32px 2em 1fr 2fr;
}

auto と併用

fr と auto を併用する場合は、auto はそのセルの内容に基づいてサイズが調整され、残りのスペースを fr で分割します。

.grid__container{
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: auto auto;
}

値が auto だけの場合は、各セルの内容が仮に空だとすれば、基本的に各セルは同じサイズになります。しかしサイズの大きいセルがあればそれに伴いサイズが調整されます。さらにコンテナのサイズを超える場合にはエリアごとはみ出してしまう場合があります。これはブラウザによっては違う動作をするかもしれません。

まとめ

今回は「グリッドレイアウト」を構成するものの用語についてを主にまとめてみました。結構概念的に理解するのが難しい部分があるかもしれませんが、図を見て理解していただけたら幸いです。あとは結局“慣れ”でしょうか！

グリッドレイアウトの基礎的な使い方も後日まとめていけたらと思います。

出典・参考文献

・W3C. 「3. Grid Layout Concepts and Terminology」. https://www.w3.org/TR/css-grid-1/#grid-concepts, 2024年8月2日閲覧。

・W3C. 「5. Grid Containers」. https://www.w3.org/TR/css-grid-1/#grid-container, 2024年8月2日閲覧。

・weblio. 「gridとは意味・読み方・使い方」. https://ejje.weblio.jp/content/grid, 2024年8月2日閲覧。

・weblio. 「trackとは意味・読み方・使い方」. https://ejje.weblio.jp/content/track, 2024年8月2日閲覧。

・weblio. 「fractionとは意味・読み方・使い方」. https://ejje.weblio.jp/content/fraction, 2024年8月2日閲覧。