Articles
CSS 簡介
與網格佈局相關的CSS屬性

與網格佈局相關的CSS屬性

本文講解了與網格佈局相關的CSS屬性。

您可以學習如何描述網格和內聯網格。

YouTube Video

預覽的HTML

css-grid.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

網格佈局

grid 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16    border: 2px solid black;
17}

網格是一種用於在二維行和列中對齊元素的佈局系統。使用網格，您可以輕鬆且靈活地構建使用傳統float或position方法難以實現的複雜佈局。雖然flexbox擅長一維佈局，但網格適合用於二維佈局。

  • grid-box類通過在display屬性中指定grid來應用網格佈局。此元素稱為網格容器。
  • grid-template-columns屬性用於指定網格列的寬度。在此範例中，第一列為100px，第二列為200px，第三列佔據剩餘空間（auto）。
  • grid-template-rows屬性用於指定網格行的高度。第一行的高度為100px，第二行高度為自動（auto），第三行高度為50px。
  • gap屬性設定網格項目之間的間距。在列與行之間添加10px的間距。

基本術語

  1. 網格容器是一個將display屬性設為grid的元素，其子元素成為網格項目。
  2. 網格項目是直接置於網格容器下的子元素。

主要網格屬性

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • grid-template-columns和grid-template-rows屬性定義了每個列和行的大小。
  • 可以使用像px和%這樣的單位，也可以使用fr（分數）來指定所佔的剩餘空間比例。
    • 在此範例中，有三列，且第二列的寬度是其他列的兩倍。
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6.item {
 7  grid-column: 2 / 4;
 8  grid-row: 1 / 3;
 9}
10/* Grid line number (3 rows & 4 columns)
11  1   2   3   4   5
121 +---+---+---+---+
13  |   | o | o |   |
142 +---+---+---+---+
15  |   | o | o |   |
163 +---+---+---+---+
17  |   |   |   |   |
184 +---+---+---+---+
19*/

  • grid-column 和 grid-row 是用於指定網格項目位置的屬性。網格的編號不是基於單元格編號，而是基於 網格線。

    • 在此範例中，項目被放置在從第2條到第4條垂直網格線，以及從第1條到第3條水平網格線的範圍內。換句話說，它占據了 第2列和第3列，以及第1行和第2行 的單元格。

  • 網格線 是指用於劃分網格容器內的行與列的線。網格線從1開始自動編號，並用作行與列的 邊界。

    • 例如，一個有4列的網格有5條垂直網格線，從1到5進行編號，每個單元格位於這些線之間的區域內。
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows 和 grid-auto-columns 是用來控制當網格佈局的行或列未明確定義時，自動生成的行和列的大小的屬性。
    • 在此範例中，明確定義了 2 行和 2 列，但如果添加更多元素，則會根據 grid-auto-rows 和 grid-auto-columns 自動生成新的行或列。
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • 水平（justify-items）與垂直（align-items）對齊網格項目。
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area 是一個屬性，它允許您一次性 指定行和列的範圍 來定位網格項目。您需要使用 網格線編號 而不是單元格編號來指定位置。
    • 在此範例中，項目被放置在從第1條到第3條水平網格線，以及從第2條到第4條垂直網格線的範圍內。換句話說，它占據了 第1行和第2行，以及第2列和第3列 的單元格範圍。
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap 在欄與列之間添加間距。您還可以使用 column-gap 和 row-gap 分別指定欄與列之間的間距。
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow 是一個屬性，用於設定項目擺放的方向，按行或按列擺放。

複雜佈局的範例 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10.grid-header {
11    grid-column: 1 / 4;
12    background-color: lightblue;
13}
14.grid-sidebar {
15    grid-column: 1 / 2;
16    grid-row: 2 / 3;
17    height: 100%;
18    background-color: lightslategray;
19    color: white;
20}
21.grid-content {
22    grid-column: 2 / 3;
23    grid-row: 2 / 3;
24    background-color: lightskyblue;
25}
26.grid-content p {
27    margin: 0;
28    padding: 0;
29    height: 260px;
30}
31.grid-ads {
32    grid-column: 3 / 4;
33    grid-row: 2 / 3;
34    height: 100%;
35    background-color: lightsteelblue;
36}
37.grid-footer {
38    grid-column: 1 / 4;
39    background-color: lightgray;
40}

通過這種方式，網格可以讓您使用簡單的代碼創建整個網頁佈局。

  • 在此範例中，有三列（側邊欄、主要內容和廣告）和三行（標題、內容和頁腳）。
  • 標頭和頁尾佔據了頁面的全部寬度，內容位於中間，側邊欄和廣告分別在兩側。

網格的優點

網格的優點包括以下幾點：。

  • 簡單的二維佈局：透過同時管理行與列的佈局，即使是複雜的佈局也可以用更少的程式碼實現。
  • 相容於響應式設計：網格系統使得創建適應不同螢幕尺寸的響應式設計更加容易。

gap 屬性 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

gap 屬性用於網格佈局和 flexbox 佈局中，用於設置元素之間的間距（空隙）。使用此屬性，您可以輕鬆地在子元素之間設置間距。

  • 在 gap-grid-container 類中，元素之間設置了垂直方向為 30px 和水平方向為 10px 的間隔。由於通過 grid-template-columns 創建了一個三列的網格，因此每個元素之間會應用垂直和水平的間隔。 在 gap-flex-container 類中，彈性盒子中的三個項目之間設置了 50px 的間隔。

基本語法 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • row-gap 指定了行與行之間的間隔。這是網格或彈性布局中的垂直間距。
  • column-gap 指定了列與列之間的間隔。這是水平間距。

如果未指定兩個值，則會將一個值同時應用於 row-gap 和 column-gap。

gap 屬性的優勢

gap 屬性的好處包括以下幾點：。

  • 簡單的間隔設置：設置子元素之間間隔的代碼變得更簡潔，不再需要為元素之間設置額外的外邊距或內邊距。
  • 靈活適配：它能輕鬆支持響應式設計，允許靈活地調整設計。

grid-template-areas 屬性 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12.grid-template-areas-container div {
13    width: 100%;
14    height: 100%;
15}
16.grid-template-areas-header {
17    grid-area: header; /* Placed in the "header" area */
18    background-color: lightblue;
19}
20.grid-template-areas-sidebar {
21    grid-area: sidebar; /* Placed in the "sidebar" area */
22    background-color: lightslategray;
23}
24.grid-template-areas-content {
25    grid-area: content; /* Placed in the "content" area */
26    background-color: lightskyblue;
27}
28.grid-template-areas-footer {
29    grid-area: footer; /* Placed in the "footer" area */
30    background-color: lightsteelblue;
31}

grid-template-areas 屬性提供了一種為網格容器中的區域命名的方法，並通過這些名稱輕鬆定位網格元素。使用該屬性可以實現直觀的布局定義。

定位在由 grid-template-areas 屬性指定的命名區域中的元素，需要通過 grid-area 屬性分配相同的名稱。即使元素跨越多個單元格，也會自動被正確定位。

在此示例中，網格創建如下：。

  • 在第一行中，"header" 橫跨兩列。
  • 在第二行中，"Sidebar" 位於左邊，"content" 位於右邊。
  • 在第三行中，"Footer" 橫跨兩列。

基本用法 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

在 grid-template-areas 屬性中，為每一行指定了區域名稱。通過將元素放置到分配了名稱的區域中，可以輕鬆創建布局。 - 在此示例中，創建了一個具有 2 行 3 列的網格，每個單元格被命名為 area1、area2 等。

使用 . 定義空單元格 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

如果您希望在佈局中有空單元格，可以使用 .（點）表示空單元格。 - 如本例所示，通過在 sidebar 和 content 之間指定一個 .，第二列將變為空白。

grid-template-areas 屬性的優勢

grid-template-areas 屬性的優點包括以下幾點。

  • 可視化佈局：它允許您以視覺化的方式表達佈局，使得設計更易於理解。
  • 輕鬆移動元素：您可以通過更改 CSS 中的區域定義輕鬆調整元素佈局，而無需修改 HTML。

注意事項

使用 grid-template-areas 屬性時，需要注意以下幾點。

  • 每行的名稱數量必須與定義的列數相匹配。
  • 如果將相同的名稱分配給多個單元格，這些單元格將被合併。
  • 如果在不同的行和列中分配相同的名稱，該區域必須形成一個矩形。

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

inline-grid 是 CSS 中 display 屬性的一個值。應用此屬性使該元素表現為內聯級容器，並在內部創建一個網格格式上下文。與 display: grid 不同，它在文檔流中作為內聯元素表現。

inline-grid 的使用場景

inline-grid 不如 grid 常見，但在特定場景中可以有效使用。

  • 內聯上下文中的網格：當您希望將網格置於文本內容或其他內聯元素旁時非常有用。例如，當按鈕、徽章、標籤等需要網格結構但又希望以內聯方式展示而不影響文本流時，它非常實用。

  • 內聯元素中的佈局控制：即使在鏈接、按鈕或 span 等內聯元素中需要複雜佈局，inline-grid 也可以使用網格佈局管理內部結構，同時避免塊級顯示。

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

在此情況下，按鈕以網格顯示圖標和文本，同時在文檔流中保持內聯。

  • 響應式內聯組件：inline-grid 可用於作為內聯內容一部分的小型組件，且需要網格佈局的情況。例如，它適用於內聯表單、徽章、產品標籤等，您希望使用網格調整佈局的同時保持內聯顯示。

inline-grid 的對齊和大小調整 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • 與其他內聯元素類似，inline-grid 遵循相對於周圍內容的垂直對齊。您可以使用 vertical-align 屬性控制網格的對齊方式。
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • 關於尺寸，inline-grid 元素只佔用其網格內容所需的寬度。如果需要，您可以明確地設置寬度、高度以及最小/最大尺寸。
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

網格本身的佈局也可以決定 inline-grid 容器的尺寸，使用如 fr、auto 和百分比這樣的彈性單位時，這種趨勢會更強。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

與Flexbox相關的CSS屬性與欄佈局相關的CSS屬性