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

基本概念

常用属性

网格布局

网格间隙

网格定位

评论