【今からでも遅くない！】CSS Grid Layoutの基本 #CSS

本記事はアイレット株式会社新卒 Advent Calendar 2023 の5日目の記事です！
自分以外にも興味深い記事を書かれている方が多いので、気になる方はそちらもぜひご覧ください。

今回の記事は、便利だけどつまずきやすい、CSSのGridという概念について、主に基礎の部分をまとめました。
読者の皆様のお役に立てれば幸いです。ではよろしくお願い致します！

初めに

Gridとは簡潔に言えばマス目のことです。また、 Grid Layout（グリッドレイアウト）は、行と列からなるマス目、その中に要素を配置できます。
このレイアウトの考え方は非常に柔軟性が高く、複雑なレイアウト構造を簡単に構築できます。

ではGridの基本について見ていきましょう。

Gridの基本概念を理解しよう

まずGridの重要概念について、Flexboxと比較しながら説明していきます。

概念を一言で示すと従来から多用されてきたFlexboxは「行か列」の線、それに対してGridは「行と列」からなるマス目になります。

以下の画像で見比べて見てみましょう。

左のFlexboxは行を基準に要素を配置、右のGridは行と列両方を基準に配置しています。

実際にWEBサイト上で見た時、Flexbox・Gridは"どちらも要素が同じように並んでいる"
そう思うかもしれません。しかし、FlexboxとGridはそれぞれ概念が異なっているため、上手く扱うにはそれぞれの概念に関する理解が必要です。

基本概念まとめ
Flexbox：
行と列のいずれかを基準にして要素を並べるもの。任意の1方向要素が並べられていくと解釈するとわかりやすいかも。1次元レイアウトともいいます。
（※どちらを基準にするかは任意で決めることができる）

Grid：
行と列２方向を基準に要素を並べるもの。2方向からなるマス目に要素が当てはめられると解釈するとわかりやすいかも。2次元レイアウトともいいます。

この基本概念に関する考え方は、Gridの使いこなすために非常に役立つと思います。

Gridの基本用語を理解しよう

基本概念を学んだところで、実際にグリッドの作成方法や基本用語やについて学んでいきましょう。

コンテナとアイテム

Flexbox同様にコンテナはGridの基本的な概念の一つで、
これは通常、display: grid;というCSSプロパティを持つ親要素を指します。

このコンテナを使用することで、その中に配置された子要素をグリッドのアイテムとして配置することが可能になります。

例えば、以下は簡単なコンテナの例です：

index.html

<div class="grid-container">
  <div class="grid-item">アイテム1</div>
  <div class="grid-item">アイテム2</div>
  <div class="grid-item">アイテム3</div>
  <div class="grid-item">アイテム4</div>
</div>

このように、grid-containerがコンテナ（親要素）であり、その中に配置されたgrid-itemがグリッドアイテム（子要素）です。この基本的な構造を理解することで、柔軟で効果的なレイアウトの構築が可能になります。

ライン

Gridにおいて、ラインはグリッドの水平または垂直な線を指します。これは通常、行番号や列番号として識別されます。例えば、次のコードでは水平方向のラインとして1行目、垂直方向のラインとして2列目を定義しています。

style.css

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px; /* 1行目は高さ100px、2行目は高さ200px */
  grid-template-columns: 50% 50%; /* 1列目は50%幅、2列目は50%幅 */
}

この場合、行番号は1から始まり、行ごとに高さが異なります。列番号も同様に1から始まり、列ごとに幅が異なります。

トラック

トラックはグリッドの行または列自体を指します。

これにはサイズがあり、grid-template-rowsやgrid-template-columnsでサイズを調節することができます。

例えば、以下のコードではトラックとして2つの行と3つの列が定義されています。

style.css

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px; /* 2つの行 */
  grid-template-columns: 1fr 2fr 1fr; /* 3つの列 */
}

セル

セルはグリッド内の1つの交差点、つまり1つのアイテムが占める領域を指します。
例えば、次のコードでは2行目と3列目のセルに配置されたアイテムがあります。

style.css

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 1fr 2fr 1fr;
}

.grid-item {
  grid-row: 2; /* アイテムが2行目に配置 */
  grid-column: 3; /* アイテムが3列目に配置 */
}

エリア

エリアはグリッド内でアイテムを配置する領域を指します。grid-template-areasを使用してエリアに名前を付け、アイテムがどのエリアに配置されるかを明示的に指定できます。
（※エリアは通常複数のセルやトラックで構成されます。）

例えば、次のコードでは左上に"header"、右上に"sidebar"、左下に"main"、右下に"footer"のエリアがあります。

style.css

.grid-container {
  display: grid;
  grid-template-areas:
    "header sidebar"
    "main   sidebar"
    "footer footer";
}

.header { 
    grid-area: header; 
}
.sidebar { 
    grid-area: sidebar; 
}
.main { 
    grid-area: main;
}
.footer { 
    grid-area: footer;
}

これにより、アイテムはそれぞれのエリアに配置されます。

まとめ

では今回のまとめです。

Gridとは簡潔に言えばマス目のことで、Grid Layout（グリッドレイアウト）は、行と列からなるマス目の中に要素を配置して作るレイアウトのこと。
コンテナはCSSプロパティを持つ親要素であり、その親に囲まれた子要素をグリッドアイテムという。
マス目を形成している行と列引かれた線をラインという。
ラインによって調整された行・列自体のことをトラックという。
1アイテムが占める領域をセルという。
複数のセルやトラックで構成された領域をエリアという。

これらの概念や用語を理解することで、実践的ななグリッドレイアウトを構築する際に役立ちます。

記事を読んでいただきありがとうございました！
ではまた〜