IT課程 CSS基礎 031_網格佈局 Grid

網格佈局 Grid

網格是由一系列水平及垂直的線構成的一種佈局模式。根據網格，我們能夠將設計元素進行排列，幫助我們設計一系列具有固定位置以及寬度的元素的頁面，使我們的網站頁面更加統一。

一個網格通常具有許多的列（column） 與 行（row），以及行與行、列與列之間的間隙，這個間隙一般被稱為溝槽（gutter）。

示例效果

基本概念

Grid 佈局由以下幾個基本概念組成：

網格容器 (grid container)：網格佈局由網格容器和網格項組成。網格容器是將網格項放置到網格中的容器。網格容器可以是任何元素，但通常使用 div 元素。
網格項 (grid item)：網格項是放置在網格容器中的元素。網格項可以是任何元素，但通常使用 div 元素。
網格線 (grid line)：網格線是將網格容器劃分為行和列的線。網格線可以是水平線或垂直線。
網格列 (grid column)：網格列是網格容器中垂直方向的線。
網格行 (grid row)：網格行是網格容器中水平方向的線。

常用屬性

網格容器屬性

網格容器具有以下屬性用於控制網格佈局：

display: 設置網格容器的顯示模式。網格容器必須設置為 display: grid 或 display: inline-grid 才能使用網格佈局。
grid-template-columns: 設置網格容器的列數和列寬（使用fr、px、em 等單位）。
grid-template-rows: 設置網格容器的行數和行高（使用fr、px、em 等單位）。
grid-template: 同時設置 grid-template-columns 和 grid-template-rows。
grid-auto-columns: 設置網格容器的列寬。
grid-auto-rows: 設置網格容器的行高。

網格項屬性

網格項具有以下屬性用於控制網格項在網格中的佈局：

grid-column: 設置網格項所在的列。
grid-row: 設置網格項所在的行。
grid-column-start: 設置網格項在列中的起始位置。
grid-column-end: 設置網格項在列中的結束位置。
grid-row-start: 設置網格項在行中的起始位置。
grid-row-end: 設置網格項在行中的結束位置。
grid-area: 設置網格項所在的區域。
grid-gap: 設置網格線之間的間距。

網格佈局

定義固定和自適應的列寬、行寬

示例：

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 100px 200px auto;
4
    /* 第一列100px，第二列200px，剩餘空間分配給自適應列 */
5
    grid-template-rows: 100px 200px auto;
6
    /* 第一行100px，第二行200px，剩餘空間分配給自適應行 */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid演示</div>
3
        <div class="item">Grid演示</div>
4
        <div class="item">Grid演示</div>
5
        <div class="item">Grid演示</div>
6
        <div class="item">Grid演示</div>
7
        <div class="item">Grid演示</div>
8
        <div class="item">Grid演示</div>
9
        <div class="item">Grid演示</div>
10
        <div class="item">Grid演示</div>
11
    </div>

效果：

示例效果使用百分比定義列寬、行寬

示例：

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 2fr 1fr;
4
    /* 第一列占30%，第二列占剩餘空間的兩份，第三列占剩餘空間的一份 */
5
    grid-template-rows: 30% 2fr 1fr;
6
    /* 第一行占30%，第二行占剩餘空間的兩份，第三行占剩餘空間的一份 */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid演示</div>
3
        <div class="item">Grid演示</div>
4
        <div class="item">Grid演示</div>
5
        <div class="item">Grid演示</div>
6
        <div class="item">Grid演示</div>
7
        <div class="item">Grid演示</div>
8
        <div class="item">Grid演示</div>
9
        <div class="item">Grid演示</div>
10
        <div class="item">Grid演示</div>
11
    </div>

效果：

示例效果等分（平均分配）列寬、行寬

示例：

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* 三等分列，每列占據剩餘空間的一份 */
5
    grid-template-rows: repeat(3, 1fr);
6
    /* 三等分行，每行占據剩餘空間的一份 */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid演示</div>
3
        <div class="item">Grid演示</div>
4
        <div class="item">Grid演示</div>
5
        <div class="item">Grid演示</div>
6
        <div class="item">Grid演示</div>
7
        <div class="item">Grid演示</div>
8
        <div class="item">Grid演示</div>
9
        <div class="item">Grid演示</div>
10
        <div class="item">Grid演示</div>
11
    </div>

效果：

示例效果使用 minmax 定義列、行的最小和最大寬度、高度

示例：

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
4
    /* 第一列最小寬度100px，占剩餘空間的一份；第二列最小寬度200px，占剩餘空間的兩份 */
5
    grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr);
6
    /* 第一行最小高度100px，占剩餘空間的一份；第二行最小高度200px，占剩餘空間的兩份 */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid演示</div>
3
        <div class="item">Grid演示</div>
4
        <div class="item">Grid演示</div>
5
        <div class="item">Grid演示</div>
6
    </div>

效果：

示例效果

網格間隙

網格間隙由 grid-row-gap 和 grid-column-gap 兩個屬性來控制。另外，CSS Grid Level 2 中引入了 gap 屬性，可以同時控制 grid-row-gap 和 grid-column-gap

示例：

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 30% 30%;
4
    grid-template-rows: 200px 200px;
5
    grid-row-gap: 50px; /* 行間隙為50px */
6
    grid-column-gap: 30px; /* 列間隙為30px */
7
    /* gap: 50px 30px; 行間隙為50px，列間隙為30px */
8
}
9
.item{
10
    margin: 10px;
11
    background-color: rgb(100, 150, 200);
12
}

1
    <div class="grid-example">
2
        <div class="item">Grid演示</div>
3
        <div class="item">Grid演示</div>
4
        <div class="item">Grid演示</div>
5
        <div class="item">Grid演示</div>
6
        <div class="item">Grid演示</div>
7
        <div class="item">Grid演示</div>
8
    </div>

效果：

示例效果

網格定位

網格定位通常指的是使用 grid-column、grid-row、以及 grid-area 這些屬性來定位網格佈局中的項目。這些屬性用於指定項目在網格中所占的列和行，或者直接指定項目所在的區域。

grid-column 是用於設置一個網格項橫跨的列的屬性。它是 grid-column-start 和 grid-column-end 的簡寫。通過 grid-column，你可以更方便地定義網格項在水平方向上的位置和跨足的列數。
grid-row 是用於設置一個網格項橫跨的行的屬性。它是 grid-row-start 和 grid-row-end 的簡寫。通過 grid-row，你可以更方便地定義網格項在垂直方向上的位置和跨足的行數。
grid-area 屬性是一個用於同時設置 grid-row-start、grid-column-start、grid-row-end 以及 grid-column-end 屬性的簡寫屬性。通過 grid-area，你可以更直觀地定義一個網格項在網格佈局中的位置和大小。

示例：

1
.example {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* 定義3列，每列占1份空間 */
5
    grid-template-rows: repeat(2, 150px);
6
    /* 定義2行，每行高度為150px */
7
    gap: 10px;
8
    padding: 20px;
9
}
10
.item {
11
    background-color: #f2f2f2;
12
    padding: 20px;
13
    border: 1px solid #ddd;
14
    text-align: center;
15
}
16
/* 使用 grid-column 和 grid-row 定位 */
17
.item1 {
18
    grid-column: 1 / 3; /* 從第1列到第3列(1+2列) */
19
    grid-row: 1 / 2;    /* 從第1行到第2行(1行) */
20
}
21
/* 使用 grid-area 定位 */
22
.item2 {
23
    grid-area: 2 / 2 / 3 / 4; /* 從第2行第2列到第3行第4列(2行)(2+3列) */
24
}

1
<div class="example">
2
    <div class="item item1">Item 1</div>
3
    <div class="item item2">Item 2</div>
4
    <div class="item">Item 3</div>
5
    <div class="item">Item 4</div>
6
    <div class="item">Item 5</div>
7
    <div class="item">Item 6</div>
8
</div>

效果：

示例效果

示例：

1
body {
2
    margin: 0;
3
    padding: 0;
4
}
5

6
.container {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
    /* 定義兩列，第一列占一份，第二列占兩份 */
10
    grid-template-rows: auto;
11
    /* 定義行高度，第一行和第三行高度由內容決定，第二行占剩餘空間 */
12
    grid-template-areas:
13
    "header header"
14
    "sidebar main"
15
    "footer footer";
16
    /* 定義區域佈局，每個區域由一個字符串表示，空格分隔單元格，換行表示新的行 */
17
    min-height: 100vh;
18
    /* 設置最小高度，確保內容高度小於視口時，仍然能看到 footer */
19
}
20

21
.header {
22
    grid-area: header;
23
    /* 將 .header 放置到名為 "header" 的區域 */
24
    background-color: #333;
25
    color: #fff;
26
    padding: 10px;
27
}
28

29
.sidebar {
30
    grid-area: sidebar;
31
    /* 將 .sidebar 放置到名為 "sidebar" 的區域 */
32
    background-color: #f2f2f2;
33
    padding: 10px;
34
}
35

36
.main {
37
    grid-area: main;
38
    /* 將 .main 放置到名為 "main" 的區域 */
39
    padding: 10px;
40
}
41

42
.footer {
43
    grid-area: footer;
44
    /* 將 .footer 放置到名為 "footer" 的區域 */
45
    background-color: #333;
46
    color: #fff;
47
    padding: 10px;
48
}

1
    <div class="container">
2
        <div class="header">Header</div>
3
        <div class="sidebar">Sidebar</div>
4
        <div class="main">
5
          <h1>Main Content</h1>
6
          <p>This is the main content area.</p>
7
        </div>
8
        <div class="footer">Footer</div>
9
    </div>

效果：

示例效果

網格佈局 Grid

基本概念

常用屬性

網格佈局

網格間隙

網格定位

評論