すっきり！見やすく！レイアウト革命！CSSグリッドレイアウトの強みと活用法

CSSグリッドレイアウトは、複雑なレイアウト構造を簡単に作成できます。Flexboxとの比較しながら、CSSグリッドレイアウトの基本、グリッドコンテナとグリッドアイテムの違い、グリッドアイテムの指定方法などを解説します。

1. はじめに

CSS Gridとは？

CSS Grid Layout（グリッドレイアウト）は、2次元のレイアウトを行え、行と列の両方を使用して複雑なレイアウトを構築できます。従来のレイアウト方法に比べて、より細かな制御が可能です。Flexboxは主に1次元レイアウト（行または列）に特化していますが、Gridは行と列の両方を制御できるため、複雑なレイアウトに適しています。

Flexboxとの比較

Flexboxは主に1次元レイアウトに適しています。つまり、アイテムを行または列に沿って並べることが得意です。一方、CSS Gridは前述の通り2次元レイアウトに適しており、複雑なページ構造や複数の要素が絡むレイアウトを簡単に作成できます。どちらも強力なツールですが、使いどころが変わってきます。

2. CSS Gridの基本概念

2次元レイアウトの概念

CSS Gridは行（Row）と列（Column）の両方を使用してレイアウトを構成します。以下の要素が基本となります：

グリッドライン：行と列の交差点にある線。グリッドの枠を形成します。
グリッドトラック：行または列の領域。グリッドラインで区切られた領域です。
グリッドセル：行と列が交差する単位の領域。アイテムが配置される場所です。

GridコンテナとGridアイテム

Gridコンテナ：display: gridまたはdisplay: inline-gridを指定した要素。グリッドレイアウトを構成するための親要素です。
Gridアイテム：Gridコンテナ内に配置される子要素。グリッドラインやグリッドエリアに配置されます。

3. CSS Gridの基本構文

Gridコンテナの設定

グリッドレイアウトを設定するには、親要素に対してdisplay: gridを指定します。これにより、その要素はグリッドコンテナとなります。

css

.container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(2, 100px);

  gap: 10px;

}

display: grid：グリッドコンテナを指定。
grid-template-columns：列の幅を指定。repeat(3, 1fr)は（frは親要素から見た子要素の割合を示します）、3つの均等な列を作成します。
grid-template-rows：行の高さを指定。ここでは2行を設定しています。
gap：グリッドアイテム間のスペースを指定します。

Gridアイテムの配置

グリッドアイテムは、grid-columnとgrid-rowプロパティを使用して位置を指定します。

css

.item {

  grid-column: 2 / 4; /* 2列目から4列目までの範囲 */

  grid-row: 1 / 3;    /* 1行目から3行目までの範囲 */

}

grid-column：アイテムが占める列の範囲を指定。
grid-row：アイテムが占める行の範囲を指定。

また、grid-areaプロパティを使用して、グリッドエリアを指定することもできます。

css

.item {

  grid-area: 1 / 2 / 3 / 4; /* 行開始 / 列開始 / 行終了 / 列終了 */

}

Gridアイテムの指定の仕方

グリッドアイテムは、グリッドライン、グリッドエリア、または簡単な位置指定を使用して配置できます。以下のプロパティを使うことができます：

grid-column：アイテムの列位置を指定。例: grid-column: 1 / 3;
grid-row：アイテムの行位置を指定。例: grid-row: 2 / 4;
grid-area：グリッドエリアを名前で指定。例: grid-area: header;

4. グリッドレイアウトの詳細設定

グリッドの線とサイズの指定

grid-template-columnsとgrid-template-rowsは、グリッドの列と行のサイズを指定します。以下は、具体的な指定方法です：

css

.container {

  display: grid;

  grid-template-columns: 1fr 2fr 1fr; /* 3列で中央の列が2倍の幅 */

  grid-template-rows: 100px auto 100px; /* 3行で最初と最後の行が固定、高さ */

}

1fr, 2fr：フレキシブルな単位となっており、領域を指定します。
auto：自動でサイズを調整することを意味しています。

grid-gap（またはgap）は、グリッドアイテム間のスペースを指定します。

css

.container {

  gap: 10px; /* アイテム間のスペースを10pxに設定 */

}

グリッドエリアの定義

grid-template-areasプロパティを使用して、グリッドエリアを名前付きで指定できます。

css

.container {

  display: grid;

  grid-template-areas: 

    "header header header"

    "main main sidebar"

    "footer footer footer";

}

.header { grid-area: header; }

.main { grid-area: main; }

.sidebar { grid-area: sidebar; }

.footer { grid-area: footer; }

グリッドエリアの名前付け：各エリアに名前を付け、レイアウトを明確に定義します。
エリアの割り当て：各グリッドアイテムにgrid-areaプロパティを使用してエリアを指定します。

5. Flexboxとの比較

Flexboxの基本概念

Flexboxは主に1次元レイアウト（行または列）を表現するのに適しており、Flexboxを使用すると、アイテムを1方向に並べる際に便利です。以下のプロパティがあります：

flex-direction：アイテムの並び方向を指定（row, columnなど）。
justify-content：主軸に沿ったアイテムの配置を指定（flex-start, center, space-betweenなど）。
align-items：交差軸に沿ったアイテムの配置を指定（flex-start, center, baselineなど）。

GridとFlexboxの使い分け

Grid：複雑なレイアウトや2次元の配置が必要な場合に適しています。例えば、ページ全体のレイアウトやダッシュボードなど、複数の行と列を使ったレイアウトに便利です。
Flexbox：単純なレイアウトや1次元のアイテム整列が必要な場合に適しています。ナビゲーションバーやカードレイアウト、単一の行または列での整列に最適です。

6. 実践的なサンプル

シンプルなグリッドレイアウトの例

以下は、シンプルなグリッドレイアウトのサンプルです：

html

<div class="container">

  <div class="item item1">1</div>

  <div class="item item2">2</div>

  <div class="item item3">3</div>

  <div class="item item4">4</div>

</div>

css

.container {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-template-rows: repeat(2, 100px);

  gap: 10px;

}

.item {

  background: #ddd;

  display: flex;

  justify-content: center;

  align-items: center;

}

複雑なグリッドレイアウトの例

次に、より複雑なレイアウトのサンプルです：

html

<div class="container">

  <header class="header">Header</header>

  <nav class="nav">Nav</nav>

  <main class="main">Main</main>

  <aside class="aside">Aside</aside>

  <footer class="footer">Footer</footer>

</div>

css

.container {

  display: grid;

  grid-template-areas: 

    "header header header"

    "nav main aside"

    "footer footer footer";

  grid-template-columns: 1fr 2fr 1fr;

  grid-template-rows: 60px auto 30px;

  gap: 10px;

}

.header { grid-area: header; }

.nav { grid-area: nav; }

.main { grid-area: main; }

.aside { grid-area: aside; }

.footer { grid-area: footer; }

FlexboxとGridを併用した例

FlexboxとGridを組み合わせる例です：

html

<div class="container">

  <header class="header">Header</header>

  <main class="main">

    <div class="flexbox-container">

      <div class="flex-item">Item 1</div>

      <div class="flex-item">Item 2</div>

      <div class="flex-item">Item 3</div>

    </div>

  </main>

  <footer class="footer">Footer</footer>

</div>

css

.container {

  display: grid;

  grid-template-areas: 

    "header"

    "main"

    "footer";

  grid-template-rows: 60px auto 30px;

}

.header { grid-area: header; }

.main { grid-area: main; }

.footer { grid-area: footer; }

.flexbox-container {

  display: flex;

  justify-content: space-between;

}

.flex-item {

  background: #ddd;

  padding: 10px;

}