CSS 網格 - 深入探討

第 9 講：CSS 網格 - 深入探討

歡迎來到《從基礎到輝煌》課程第九講。在本次講座中，我們將探索 CSS 網格，這是一個強大的佈局系統，可讓您輕鬆建立複雜的網頁佈局。雖然 Flexbox 非常適合單維佈局（行或列），但 CSS Grid 提供了二維佈局系統，使您能夠同時控制行和列。

---

什麼是 CSS 網格？

CSS 網格是 CSS 中的佈局系統，可以創建靈活的、響應式的、基於網格的佈局。它允許您將元素對齊到行和列中，比 Flexbox 提供更多對佈局結構的控制。

---

網格術語

在深入範例之前，讓我們先熟悉一些關鍵術語：

• 網格容器：包含網格的父元素。
• 網格項目：網格容器內的子元素。
• 網格線：網格的水平和垂直分割線。
• 網格軌道：兩條網格線之間的空間，形成行或列。
• 網格單元：由行和列相交形成的網格中最小的單一單元。

---

1.基本網格結構

要開始使用 Grid，請將 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 列：第一列寬 100px，第二列寬 200px，第三列寬 100px。
• 2 行：第一行高 50 像素，第二行高 150 像素。

---

3.使用小數單位 (fr)

CSS Grid 引入了分數單位 fr，它表示網格容器中可用空間的一小部分。這是在網格項之間分配空間的靈活方式。

• 範例：使用 fr 平均分割空間。

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

在此範例中，三列將具有相等的寬度，每列佔用可用空間的一小部分。

---

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 */
  }

在這種情況下，網格項目將跨越前兩列，但會放置在第一行。

---

5.網格間隙

grid-gap 屬性在水平和垂直方向上新增網格項之間的空間。

• 範例：在列和行之間新增間隙。

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

這會在所有網格項目之間建立相等的 20px 間隙。

---

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) 建立的三個等寬列。
• 網格間隙設定為 10px 以在網格項目之間新增空間。
• 每個 .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中文網其他相關文章！