今天要來介紹CSS網格佈局（Grid Layout），它也是用於設計佈局的好幫手，不用複雜的HTML或CSS程式碼也能處理多列和多行結構，實現複雜的佈局哦!

為何使用網格佈局？

CSS網格佈局的主要好處有這幾點：

• 靈活性：
  允許你創建高度自定義的佈局，無論是單一頁面還是整個網站，都能適應不同的需求。

• 簡潔性：
  與浮動和定位的方法相比，能夠以更少的程式碼實現複雜的佈局也更易於維護和理解。

• 優雅性：
  網格佈局使網頁元素之間的對齊變得很容易，實現視覺平整和對稱。

網格基本概念

一些基本概念：

• 網格容器（Grid Container）：
  網格的外部容器，它包含了所有網格項目。通常，這是一個HTML元素，如 <div>。

• 網格項目（Grid Item）：
  網格容器中的內容，可以是文本、圖片、其他元素等。

• 行（Row）和列（Column）：
  網格是由行和列組成的二維結構。行是垂直方向的，列是水平方向的。

• 網格線（Grid Line）：
  網格中的水平和垂直線，用於定義網格的結構。

• 網格單元（Grid Cell）：
  網格中的一個單元格，由四個相鄰的網格線圍成。

• 網格區域（Grid Area）：
  一個或多個相鄰的網格單元組成的區域，可以放置網格項目。

使用方法

要創建一個CSS網格佈局，首先需要定義網格容器，然後將網格項目放置在網格區域內。
範例：

• 步驟1：定義網格容器

.container {
    /* 建立一個網格容器 */
  display: grid; 
    /* 定義列數和寬度 */
  grid-template-columns: repeat(3, 1fr); 
    /* 自動調整行高度 */
  grid-template-rows: auto; 
    /* 定義網格間隙 */
  gap: 10px; 
}

• 步驟2：定義網格項目

.item {
    /* 放在第2列到第4列之間 */
  grid-column: 2 / 4; 
    /* 放在第1行 */
  grid-row: 1; 
}

• 步驟3：撰寫HTML結構
  創建了一個包含3列的網格容器，並將三個網格項目放置在不同的列中。

    /* 網格容器container */
<div class="container">
      /* 網格項目item */
  <div class="item">項目1</div>
  <div class="item">項目2</div>
  <div class="item">項目3</div>
</div>

這樣就能夠以更有效的方式來設計網頁佈局囉!
今天介紹到這邊，感謝觀看!