Grid Layoutの基礎

CSS Grid Layoutは、ウェブページのレイアウトを作成するための強力な2次元レイアウトシステムです。以下に、Grid Layoutの基本的な使い方を網羅的に説明するいくつかの例を示します。

1. 基本的な Grid コンテナ

html
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
css
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}

.grid-container > div {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

この例では、.grid-container クラスに display: grid; を適用し、3つの列を定義しています。

2. グリッドの行と列

html
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
css
.grid-container {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: auto 100px auto;
  gap: 10px;
}

grid-template-columns と grid-template-rows を使って、列と行のサイズを指定します。

3. グリッドエリア

html
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>
css
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}

.item1 { grid-area: 1 / 1 / 2 / 3; }
.item2 { grid-area: 1 / 3 / 3 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
/* 他のアイテムのスタイルも同様に定義 */

grid-area を使って、アイテムが占めるエリアを指定します。

4. グリッドのギャップ

html
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>
css
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px;
  column-gap: 40px;
}

row-gap と column-gap を使って、行と列の間のギャップを調整します。

5. グリッドの配置

html
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>
css
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

justify-items と align-items を使って、アイテムをグリッドセル内で水平方向と垂直方向に配置します。

これらの例はCSS Gridの基本を示していますが、CSS Gridは非常に柔軟で強力なレイアウトシステムであり、多くの追加機能やオプションを提供します。実際のプロジェクトでこれらのコードを試すことで、より深い理解を得ることができます。

練習問題

CSS Grid Layoutの理解を深めるために、実践的な練習問題をいくつか示します。これらの問題は、Grid Layoutの基本的な概念とその応用を理解するのに役立ちます。

練習問題 1: 基本的なグリッドの作成

html
<div class="grid-container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
  <div>アイテム4</div>
  <div>アイテム5</div>
  <div>アイテム6</div>
</div>
css
.grid-container {
  display: grid;
  /* ここにCSSを追加 */
}

問題:

  1. .grid-container に3列のグリッドレイアウトを作成してください。
  2. 各アイテムに異なる行と列のサイズを設定してください。

練習問題 2: グリッドエリアの使用

html
<div class="grid-container">
  <div class="header">ヘッダー</div>
  <div class="sidebar">サイドバー</div>
  <div class="content">コンテンツ</div>
  <div class="footer">フッター</div>
</div>
css
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  /* ここにCSSを追加 */
}

問題:

  1. grid-template-areas を使用して、ヘッダー、サイドバー、コンテンツ、フッターを配置してください。
  2. 各エリアのサイズを調整してください。

練習問題 3: グリッドのギャップと配置

html
<div class="grid-container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
  <!-- 他のアイテム -->
</div>
css
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* ここにCSSを追加 */
}

問題:

  1. 行と列のギャップを設定してください。
  2. 特定のアイテム（例えばアイテム2）を中央に配置してください。

練習問題 4: グリッドの応答性

html
<div class="grid-container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
  <!-- 他のアイテム -->
</div>
css
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  /* ここにCSSを追加 */
}

問題:

  1. 画面の幅に応じてアイテムが動的に変化するように設定してください。
  2. 画面サイズが小さい場合には1列、大きい場合には複数列になるようにしてください。

これらの問題を解くことで、CSS Grid Layoutの基本的な使い方や応用方法を実践的に学ぶことができます。異なる設定を試し、その結果を観察することで、Grid Layoutの理解を深めることができるでしょう。