Flexbox 適合一維的排版（單行或單列），而 Grid (Grid Layout) 則是一個二維的網格系統，它能像操作 Excel 表格一樣，輕鬆的將網頁劃分為多個欄位和行。

Grid 的核心概念是「網格容器」和「網格項目」。同樣，我們只需要在父容器上設定 display: grid;。

幾個常用的 Grid 屬性：

• display: grid;：開啟 Grid 排版。
• grid-template-columns： 定義網格的欄位。
• grid-template-rows： 定義網格的行。
• gap： 定義網格項目之間的間隔。

grid-template-columns 的值可以有很多種，最常用的是 fr (fraction) 單位，代表「份數」。例如，grid-template-columns: 1fr 1fr 1fr; 會把容器分成三等分。

用 Grid 來製作一個簡單的部落格文章列表。

在 index.html 中：

HTML

<div class="post-grid">
  <div class="post">文章一</div>
  <div class="post">文章二</div>
  <div class="post">文章三</div>
  <div class="post">文章四</div>
</div>

在 style.css 中：

CSS

.post-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三欄等寬 */
  gap: 20px; /* 項目間隔 20px */
}
.post {
  background-color: #e74c3c;
  color: white;
  padding: 20px;
  text-align: center;
}

這是一個 Grid 的入門範例，Grid 的功能遠不止於此。但透過這個例子，可以看到它在處理複雜佈局時的強大優勢。Flexbox 和 Grid 各有專長，在實際開發中，通常會搭配使用。

執行成果 :