CSS Grid 布局是一种新的 CSS 布局方式，它可以让我们更加灵活地进行页面布局。相比于传统的浮动布局和 Flexbox 布局，CSS Grid 布局具有更强的自由度和可控性。在本文中，我们将会深入探讨 CSS Grid 布局的使用方式以及其优势和适用场景。
什么是 CSS Grid 布局
CSS Grid 布局是一个二维的网格布局系统，它可以将一个 HTML 元素分割成若干行和列，形成一个网格。我们可以通过 CSS 属性来定义这些行和列的大小、间距以及对齐方式，从而实现复杂的页面布局。
CSS Grid 布局的主要特点包括：
- 支持多行多列布局
- 可以定义行和列的大小、间距以及对齐方式
- 可以使用命名网格线来更方便地管理网格
- 可以实现多种布局模式，如垂直居中、等分布局等
如何使用 CSS Grid 布局
要使用 CSS Grid 布局，我们需要先定义一个网格容器，即一个 HTML 元素，然后在该元素上设置 display: grid 属性。该属性会将该元素转换为一个网格容器，从而可以使用 CSS Grid 布局。
接下来，我们可以通过 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列。这两个属性接受一个由空格分隔的值列表，每个值代表一行或一列的大小。例如，下面的代码定义了一个包含两行和三列的网格：
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr 1fr;
}在上面的代码中，我们使用 1fr 和 2fr 来定义了三列，其中第二列的宽度是第一列的两倍。这样，我们就可以通过比例来控制每一列的宽度。
除了定义行和列的大小，我们还可以使用 grid-gap 属性来定义网格之间的间距。该属性接受两个值，分别表示行间距和列间距。例如，下面的代码定义了一个行间距为 20px，列间距为 10px 的网格：
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 20px 10px;
}通过上述方式，我们可以轻松地定义一个网格布局。接下来，我们将通过几个示例来演示 CSS Grid 布局的具体使用方式。
示例一：等分布局
在这个示例中，我们将通过 CSS Grid 布局来实现一个等分布局，即将一个容器分成若干个等宽的列。
首先，我们需要定义一个包含若干子元素的容器，并设置 display: grid 属性。接下来，我们可以通过 grid-template-columns 属性来定义每个子元素的宽度。由于我们希望每个子元素的宽度相等，因此我们可以使用 repeat() 函数来定义多个相同大小的列。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}在上面的代码中，我们定义了一个包含三个等宽列的容器。接下来，我们可以在容器中添加多个子元素，并设置它们的样式。例如，下面的代码定义了三个子元素，每个子元素的背景颜色不同：
// www.javascriptcn.com code example
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item {
background-color: #f00;
}
.item:nth-child(2) {
background-color: #0f0;
}
.item:nth-child(3) {
background-color: #00f;
}通过上述方式，我们就可以实现一个等分布局。该布局可以适用于多种场景，如导航栏、图片墙等。
示例二：垂直居中布局
在这个示例中，我们将通过 CSS Grid 布局来实现一个垂直居中的布局，即将一个子元素在容器中垂直居中显示。
首先，我们需要定义一个包含一个子元素的容器，并设置 display: grid 属性。接下来，我们可以通过 grid-template-rows 属性来定义容器的行高，从而实现垂直居中。
.container {
display: grid;
grid-template-rows: 1fr;
height: 200px;
}在上面的代码中，我们将容器的高度设置为 200px，并将行高设置为 1fr。这样，子元素就可以在容器中垂直居中。
接下来，我们可以在容器中添加一个子元素，并设置它的样式。例如，下面的代码定义了一个子元素，它的高度为 50px，背景颜色为蓝色：
// www.javascriptcn.com code example
.container {
display: grid;
grid-template-rows: 1fr;
height: 200px;
}
.item {
height: 50px;
background-color: #00f;
}通过上述方式，我们就可以实现一个垂直居中的布局。该布局可以适用于多种场景，如登录框、提示框等。
优势和适用场景
CSS Grid 布局具有以下优势：
- 灵活性：CSS Grid 布局可以实现多种布局模式，如等分布局、垂直居中布局等，具有更强的自由度和可控性。
- 可读性：CSS Grid 布局使用命名网格线来管理网格，具有更好的可读性和可维护性。
- 兼容性：CSS Grid 布局已成为 W3C 标准，支持现代浏览器，且可以通过 Autoprefixer 等工具自动添加浏览器前缀。
CSS Grid 布局适用于多种场景，如：
- 复杂的页面布局，如新闻网站、电商网站等。
- 需要多列等分布局的场景，如导航栏、图片墙等。
- 需要垂直居中的场景，如登录框、提示框等。
结语
本文介绍了 CSS Grid 布局的使用方式和优势，以及适用场景和示例。通过学习本文，读者可以更加深入地了解 CSS Grid 布局，并在实际项目中应用。同时，读者也可以参考本文中的示例代码来实践和练习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d25816a941bf71344712bc