在CSS中，彈性版面（Flexbox）和格線版面（Grid Layout）是兩種強大的版面設計工具，用來創建響應式和靈活的網頁布局。它們各有特色，適用於不同的場景。

彈性版面（Flexbox） 專為一維布局而設計，特別適合在一個方向上（水平或垂直）排列元素。Flexbox可自動調整子元素的大小、間距及對齊方式，簡化了居中和間距設計等常見的版面任務。

使用Flexbox的範例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  justify-content: space-between; /* 子元素均勻分布 */
  align-items: center; /* 子元素垂直居中 */
}

.item {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid #ddd;
}

在這個例子中，Flexbox幫助我們在容器內橫向排列三個子元素，並自動調整間距和對齊方式。

格線版面（Grid Layout） 是一種二維布局系統，允許同時管理行和列。這種方式非常適合設計複雜的網頁結構，如多列的內容展示、相片牆等。Grid可以創建固定或彈性尺寸的行和列，並允許元素在多個格子中擴展。

使用Grid Layout的範例：

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 創建兩列，等分佈 */
  grid-template-rows: auto; /* 行高自動調整 */
  gap: 10px; /* 格子間距 */
}

.grid-item {
  background-color: lightgreen;
  padding: 20px;
  border: 1px solid #ddd;
}

在這個例子中，Grid Layout幫助我們將四個元素放入兩列中，並自動調整它們的大小和間距。

選擇彈性版面或格線版面：

• Flexbox 適合用於簡單、一維的佈局。
• Grid 更適合複雜、二維的佈局。