CSS 網格佈局

上一頁
下一頁

CSS 網格佈局是一個用於開發響應式網頁的二維佈局系統。在本教程中，我們將學習如何使用網格系統設計網頁佈局。

什麼是網格佈局？

網格佈局用於透過在網頁上提供 HTML 元件的響應式和靈活排列來增強所有使用者裝置上的使用者體驗。

網格非常適合建立網頁的整體佈局，而Flexbox主要用於對齊容器內的專案。

目錄


 

網格元素

在網格佈局系統中，我們有兩個元素，網格容器和網格專案。

網格容器

網格容器定義了網格的外層元素，其中包含所有子元素。可以透過設定`display: grid`或`display: inline-grid`來定義網格容器。

網格專案

網格專案是網格容器內的所有直接元素。這些專案可以根據需要在 Flexbox 容器內垂直和水平排列。

CSS Grid Layout

顯示網格屬性

如果我們將 display 屬性的值設定為`grid`或`inline-grid`，則 HTML 元素將成為網格容器。網格容器的所有直接子元素自動成為網格專案。

  • grid:此值定義塊級網格容器，表示其行為類似於塊元素，佔用所有可用寬度。（類似於 div）
  • inline-grid:此值定義內聯級網格容器，表示其行為類似於內聯元素，佔用與其內容一樣寬的寬度。（類似於 span）

示例

以下示例顯示了 grid 和 inline-grid 之間的區別。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         gap: 10px;
         width: 100%;
         background-color: lightblue;
      }
      .inline-grid-container {
         display: inline-grid;
         grid-template-columns: 1fr 1fr 1fr;
         gap: 10px;
         background-color: lightgreen;
      }
      .grid-item {
         background-color: lightcoral;
         padding: 20px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h3>Inline Grid Example</h3>
   <p>
         Here is an example of 
         <span class="inline-grid-container">
            <span class="grid-item">1</span>
            <span class="grid-item">2</span>
            <span class="grid-item">3</span>
         </span> 
         inline grid.
   </p>
   
   <h3>Grid Example</h3>
      <div class="grid-container">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
   </div>
</body>
</html>

網格行和列

在 CSS 中，我們可以定義佈局中所需的列數和行數。每個單元格將代表一個網格專案。以下程式碼顯示瞭如何在網格中定義行和列。

示例

在這個示例中，我們將建立兩個網格佈局，一個是用於行，另一個是用於列，每個網格都有行和列，但單獨顯示它們將幫助您理解行和列。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .grid-container {
            display: grid;
            gap: 10px;
            padding: 10px;
            width: 75%;
        }
        .grid-item {
            background-color: #4CAF50;
            border: 1px solid #ddd;
            padding: 20px;
            text-align: center;
            font-size: 1.2em;
            color: white;
        }
        .row{
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, 1fr);
        }
        .column{
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr;
        }
    </style>
</head>
<body>
    <h1>Grid Layout Example</h1>
    <h3>Grid Rows - 3 Rows X 1 Column</h3>
    <div class="grid-container row">
      <div class="grid-item item1">
         Item 1
      </div>
      <div class="grid-item item2">
         Item 2
      </div>
      <div class="grid-item item3">
         Item 3
      </div>
    </div>
    
    <h3>Grid Columns - 1 Row X 3 Columns </h3>
    <div class="grid-container column">
      <div class="grid-item item1">
         Item 1
      </div>
      <div class="grid-item item2">
         Item 2
      </div>
      <div class="grid-item item3">
         Item 3
      </div>
    </div>
</body>
</html>

網格間隙

grid gap 屬性用於在網格專案的行和列之間新增間隙。我們有三個與此相關的屬性，`gap`、`column-gap`和`row-gap`。

gap屬性可以為行和列設定相等的間隙，而`row-gap`和`column-gap`可以為行和列設定不同的間隙值。行值和列值比間隙值具有更高的優先順序，因此，如果我們定義所有三個，則行值和列值將覆蓋間隙值。

示例

在此示例中，我們嘗試解釋網格專案之間的間隙。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-template-rows: 100px 100px 100px;

         /* Sets both row and column gaps to 20px */
         gap: 20px; 
         /* Make gap between rows as 10px (override) */
         row-gap: 10px; 
         /* Make gap between columns as 5px (override) */
         column-gap: 5px; 
      }
      .grid-item {
         background-color: #4CAF50;
         border: 1px solid #ddd;
         padding: 20px;
         text-align: center;
         font-size: 1.2em;
         color: white;
      }
   </style>
</head>

<body>
    <h1>Grid Gap Example</h1>
    <div class="grid-container">
      <div class="grid-item">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item">
         Item 5
      </div>
      <div class="grid-item">
         Item 6
      </div>
    </div>
</body>
</html>

CSS 網格線

在 CSS 中，可以根據網格單元格之間稱為網格線的虛線來放置網格專案。列之間的線稱為列線，行之間的線稱為行線。

CSS Grid Lines

CSS 網格屬性參考

以下是與網格相關的 CSS 屬性列表

屬性 值 示例
display 定義元素是網格容器還是內聯網格容器。
gap 定義行和列之間的間隙。
grid-area 定義網格專案在網格佈局中的位置和大小。
grid-column 控制網格專案在網格容器中列方向上的放置。
grid-row 控制網格專案在網格容器中行方向上的放置。
grid-template 指定網格列、網格行和網格區域。
grid-auto-columns 確定自動生成的網格列軌道的大小或此類軌道的模式。
grid-auto-rows 確定自動生成的網格行軌道的大小或此類軌道的模式。
grid-auto-flow 指定網格專案在網格中的排列。
列印頁面
上一頁
下一頁
廣告