Chapter 12無料公開

グリッド線/Grid line

グリッド線/グリッドラインとは、区間を区切る線のことです。

グリッドラインと、グリッドセル、グリッドトラック、グリッド領域/グリッドエリアに関して、ここからはエクセルの例を使って説明をします。

エクセルは、一度は見たことがある構造かと思いますが、もっと簡単に表現するとすれば、「表」です。

表やエクセルには、以下の図のように、線によって、それぞれのセルが区切られています。

これらの線があることにより、上記の青い囲み線の範囲のように、1つ1つのセルが構成されていきます。

そしてCSSグリッドのグリッドラインには、番号がついていて、「xx番目のグリッドラインからxx番目のグリッドラインまでの範囲」と指定をすることで、より細かいアイテムにアクセスでき、より柔軟なアイテムの構成や配置を行うことが可能になります。

ただ、グリッドラインの番号だけだと、行の線なのか、列の線なのかが区別がつかないので、

  • 「columnグリッドライン、xx番目」
  • 「rowグリッドライン、xx番目」

と、呼んで区別をつけます。

線は、1本だけではエクセルで言う、セルの領域を作ることはできませんが、1本以上存在することで、エクセルのセルの領域を構成することができます。

そして、CSSグリッドでも、この複数の線から構成される領域のことを、 グリッドセル と呼びます。

グリッドセルについては、次のチャプターで詳しく見ていきましょう。