CSS グリッド - 詳しい説明

レクチャー 9: CSS グリッド - 詳しい説明

「基礎から応用まで」コースの第9回講座へようこそ。この講義では、複雑な Web レイアウトを簡単に作成できる強力なレイアウト システムである CSS Grid について説明します。 Flexbox は 1 次元レイアウト (行または列) に最適ですが、CSS グリッドは 2 次元レイアウト システムを提供し、行と列の両方を同時に制御できます。

---

CSS グリッドとは何ですか?

CSS グリッドは、柔軟で応答性の高いグリッドベースのレイアウトの作成を可能にする CSS のレイアウト システムです。要素を行と列に配置できるため、Flexbox よりもレイアウト構造をより細かく制御できます。

---

グリッドの用語

例に入る前に、いくつかの重要な用語について理解しましょう:

• Grid Container: グリッドを含む親要素。
• グリッド項目: グリッドコンテナー内の子要素。
• グリッド線: グリッドの水平および垂直の分割線。
• グリッド トラック: 行または列を形成する 2 本のグリッド ライン間のスペース。
• グリッドセル: 行と列の交差によって形成されるグリッド内の最小の個々の単位。

---

1.基本的なグリッド構造

グリッドの使用を開始するには、display:grid をコンテナに適用します。

• 例:

  .grid-container {
    display: grid;
  }

display:grid が適用されると、コンテナの子要素がグリッド項目になります。

---

2.グリッドの列と行の定義

grid-template-columns プロパティと Grid-template-rows プロパティを使用して、グリッドに含める行と列の数を定義できます。

• 例: 3 列 2 行のグリッドを作成します。

  .grid-container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    grid-template-rows: 50px 150px;
  }

これにより、次のグリッドが作成されます:

• 3 列: 最初の列の幅は 100 ピクセル、2 番目の列は 200 ピクセル、3 番目の列は 100 ピクセルです。
• 2 行: 最初の行の高さは 50 ピクセル、2 行目は 150 ピクセルです。

---

3.小数単位 (fr) の使用

CSS グリッドでは、グリッド コンテナー内の利用可能なスペースの一部を表す小数単位 fr が導入されています。これは、グリッド項目間にスペースを割り当てる柔軟な方法です。

• 例: fr を使用して空間を均等に分割します。

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

この例では、3 つの列の幅は同じになり、それぞれが使用可能なスペースの一部を占めます。

---

4.グリッドアイテムの配置

grid-column プロパティと Grid-row プロパティを使用して、各グリッド項目を配置する場所を制御できます。これらのプロパティを使用すると、項目の開始位置と終了位置を指定できます。

• 例:

  .grid-item {
    grid-column: 1 / 3; /* This item spans from column 1 to column 3 */
    grid-row: 1 / 2;    /* This item is placed in the first row */
  }

この場合、グリッド項目は最初の 2 列にまたがりますが、最初の行に配置されます。

---

5.グリッドギャップ

grid-gap プロパティは、グリッド項目間に水平方向と垂直方向の両方のスペースを追加します。

• 例: 列と行の間にギャップを追加します。

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
  }

これにより、すべてのグリッド項目間に等しい 20 ピクセルのギャップが作成されます。

---

6.自動フィットと自動入力

自動フィットと自動入力は、グリッドがコンテナのサイズに基づいてできるだけ多くの列を自動的に配置できる強力な機能です。

• 自動調整の例:

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

ここでは、グリッドは可能な限り多くの列に自動的に適合し、各列の幅は少なくとも 100 ピクセルになりますが、利用可能なスペースを満たすまで拡大することができます。

---

実践例: 単純なグリッド レイアウト

CSS Grid を使用して簡単なグリッド レイアウトを作成してみましょう。

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 class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

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

この例では:

• .grid-container には、repeat(3, 1fr) を使用して作成された 3 つの等しい幅の列があります。
• グリッド項目間にスペースを追加するために、グリッド ギャップは 10 ピクセルに設定されます。
• 各 .grid-item には、視認性を高めるためにパディングと背景色が適用されています。

---

7.ネストされたグリッド

グリッドをネストすることもでき、グリッド項目自体がグリッド コンテナーになります。これにより、より複雑なレイアウトが可能になります。

• 例:

  .nested-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }

この概念を適用して、別のグリッド内にグリッドを作成し、レイアウトをより細かく制御できます。

---

Responsive Design with CSS Grid

CSS Grid is great for responsive design. You can adjust the number of columns based on the screen size using media queries.

• Example: Creating a responsive grid.

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }

  @media screen and (max-width: 768px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 480px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }

In this example:

• The grid starts with three columns.
• On screens smaller than 768px, the grid switches to two columns.
• On screens smaller than 480px, the grid collapses to a single column.

---

Practice Exercise

1. Create a webpage layout using CSS Grid with a header, main content, sidebar, and footer.
2. Use grid-template-columns and grid-template-rows to define the grid structure.
3. Make the layout responsive by adjusting the number of columns on different screen sizes.

---

Next Up: In the next lecture, we’ll explore Advanced CSS Grid Techniques, including grid areas, template layouts, and combining Grid with Flexbox. Stay tuned!

---

Follow Me on LinkedIn-

Ridoy Hasan

以上がCSS グリッド - 詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。