グリッド線/グリッドラインとは、区間を区切る線のことです。
グリッドラインと、グリッドセル、グリッドトラック、グリッド領域/グリッドエリアに関して、ここからはエクセルの例を使って説明をします。
エクセルは、一度は見たことがある構造かと思いますが、もっと簡単に表現するとすれば、「表」です。
表やエクセルには、以下の図のように、線によって、それぞれのセルが区切られています。
これらの線があることにより、上記の青い囲み線の範囲のように、1つ1つのセルが構成されていきます。
そしてCSSグリッドのグリッドラインには、番号がついていて、「xx番目のグリッドラインからxx番目のグリッドラインまでの範囲」と指定をすることで、より細かいアイテムにアクセスでき、より柔軟なアイテムの構成や配置を行うことが可能になります。
ただ、グリッドラインの番号だけだと、行の線なのか、列の線なのかが区別がつかないので、
- 「columnグリッドライン、xx番目」
- 「rowグリッドライン、xx番目」
と、呼んで区別をつけます。
線は、1本だけではエクセルで言う、セルの領域を作ることはできませんが、1本以上存在することで、エクセルのセルの領域を構成することができます。
そして、CSSグリッドでも、この複数の線から構成される領域のことを、 グリッドセル と呼びます。
グリッドセルについては、次のチャプターで詳しく見ていきましょう。