Chapter 15無料公開

グリッド領域/Grid areas

グリッド領域/グリッドエリアは、1つ以上のグリッドセルから構成される領域です。

もう少し簡単に言うと、グリッドセルの集合体、グリッドセルが複数集まった領域になります。

ただし、T字やL字のグリッドエリアを構成することは、現在のCSSグリッドでは実現できないため、必ず長方形、もしくは正方形の形をした領域になります。

クイズ

では、ここで先ほど学習をした、グリッド線/グリッドラインを使って、上記の黄色いグリッドエリアの範囲を、表現してみてください。

考えてみてわかったら、以下の表現と同じになっているか、確認をしましょう。

もしわからなかった場合は、グリッドラインのチャプター内容にヒントがあります。

まずは自分で答えを考えて、以下を読み進めましょう。

答え

正解は、以下です。

上記グリッドエリアの領域表現、答え

横/行: 「rowグリッドライン1番目の線と、3番目の線の間
縦/列: 「columnグリッドライン1番目の線と、3番目の線の間

上記の正解と照らし合わせながら、何番目のグリッドラインと一致するかを、以下の図を参考に見てみると、なぜ答えのようになるのかが、わかりやすいかと思います。