CSS 详解grid布局（网格布局）与应用

CSS Grid 布局 是一种强大的布局系统，它允许你轻松创建复杂且响应式的布局。它使用网格系统，其中元素被放置在列和行中。

基本概念：

• 网格容器：包含网格布局的元素。
• 网格线：将网格容器划分为列和行的垂直和水平线。
• 网格单元格：网格线形成的区域。
• 网格项：放置在网格单元格中的元素。

创建网格布局：

要创建网格布局，请使用 display: grid; 属性：

.container {
  display: grid;
}
1
2
3

定义列和行：

使用 grid-template-columns 和 grid-template-rows 属性定义网格的列和行：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr;
}
1
2
3
4
5

上面的代码定义了三列和两行。1fr 表示列或行的宽度或高度将根据可用空间按比例分配，其中列的比例为1：2：1，行的比例为1：2，具体效果可参考最下方示例。

也可根据固定值与百分比等形式进行分配：

.container {
  display: grid;
  grid-template-columns: 100px 20% 1fr 2fr;
  grid-template-rows: 1fr 2fr;
}
1
2
3
4
5

上面的代码定义了四列和两行，其中第一列宽100px；第二列占总宽度的20%；第三列和第四列按照剩余宽度的1：2进行平均分配。

minmax()函数值：

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

上面的代码定义了三列，若平均分配宽度小于100px，则最后一列占100px，剩余宽度前两列平均分配，若平均分配宽度大于100px，则平均分配。

repeat()函数值：

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是要重复的值。

grid-template-columns: repeat(2, 100px 20% 50px);
1

上面的代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为总宽度的20%，第三列和第六列为50px。
等同于以下写法：

grid-template-columns: 100px 20% 50px 100px 20% 50px;
1

在无法确认要重复几列时，重复次数使用关键字：auto-fill 或 auto-fit。如下所示：

.container {
    grid-template-columns: repeat(auto-fill, 100px);
}
.container {
    grid-template-columns: repeat(auto-fit, 100px);
}
1
2
3
4
5
6

其中auto-fill 会自动创建网格线以填充未分配的空间，而 auto-fit 不会（一般使用auto-fit）。

放置网格项：

使用 grid-column-start, grid-column-end, grid-row-start, 和 grid-row-end 属性放置网格项：

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6

上面的代码将 .item1 放置在从第一列到第三列、从第一行到第二行的区域中（会将gap区域一同覆盖）（参考最下方示例）。

其他属性：

CSS Grid 布局还提供了许多其他属性，用于控制网格项的对齐、间距和外观：

• justify-content 和 align-items：控制网格项在列和行中的对齐方式。
• gap：设置网格项之间的间距，第一个参数为不同行之间的间距，第二个为不同列之间的间距，也可只传一个参数，将同时设置行和列之间的间距。
• grid-area：使用一个简短的字符串（例如，“1 / 2 / 3 / 4”）指定网格项的区域，其中参数分别为< row-start > / < column-start > / < row-end > / < column-end >。

优点：

• 灵活性和响应性：网格布局非常灵活，可以根据可用空间轻松创建响应式布局。
• 易于使用：与其他布局方法相比，网格布局的语法相对简单易懂。
• 强大的功能：网格布局提供了广泛的功能，使你可以创建复杂且多样的布局。

示例：

这是一个简单的网格布局示例，其中容器被划分为三列和两行：

<div class="container">
  <div class="item1">项目 1</div>
  <div class="item2">项目 2</div>
  <div class="item3">项目 3</div>
  <div class="item4">项目 4</div>
</div>
1
2
3
4
5
6

.container {
  height: 300px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; // 列按1：2：1自动分配
  grid-template-rows: 1fr 2fr; // 行按1：2自动分配
  gap: 10px 50px; // 第一个参数为不同行之间的间距，第二个为不同列之间的间距，也可只传一个参数，将同时设置行和列之间的间距
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3; // 项目1的列为索引1-3之间的区域
  grid-row-start: 1;
  grid-row-end: 2;// 项目1的行为索引1-2之间的区域
  background: red;
}

.item2 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  background: green;
}

.item3 {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 3;
  background: blue;
}

.item4 {
  grid-column-start: 3;
  grid-row-start: -1;
  grid-row-end: -2;
  background: yellow;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

效果：

上面代码将创建以下布局：

其中各模块的行和列的索引值如下图所示：

一般掌握以上内容就可应对绝大部分情况。你可以根据需要调整网格布局，以创建各种不同的设计。