CSS 网格简介：综合指南
作者：互联网
CSS Grid 是一个布局系统，可让您轻松创建复杂的、基于网格的设计。它提供了一个二维网格结构，允许您在行和列上排列和定位元素。这使其成为创建响应式和灵活的 Web 布局的绝佳选择。在本指南中，我们将探讨 CSS 网格的关键概念，并通过实际代码示例演示如何使用它。
CSS 网格入门
在我们深入研究 CSS Grid 的细节之前，让我们先了解一下与之相关的基本结构和术语。
网格容器和网格项
CSS 网格由两个主要组件组成：网格容器和网格项。网格容器是保存所有网格项的父元素。它是通过将其属性设置为 或 来定义的。displaygridinline-grid
.grid-container {
display: grid;
}
另一方面，网格项是网格容器的子元素。它们是将放置在网格内的元素。若要将元素指定为网格项，需要将其直接放置在网格容器中。
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
网格线和网格轨道
CSS Grid 引入了网格线和网格轨迹的概念。网格线是定义网格边界的水平线和垂直线。网格轨迹是这些网格线之间的空间。
考虑一个包含三行三列的简单网格：
例中，我们有三行和三列，每列的高度或宽度为 100 像素。and 属性分别定义行和列的大小和数量。grid-template-rowsgrid-template-columns
网格区域
网格区域提供了一种命名和引用网格中特定区域的便捷方法。可以使用网格容器上的属性为网格区域指定名称。然后，可以将每个网格项定位在这些命名区域中。grid-template-areas
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.grid-item {
grid-area: header;
}
在上面的例子中，我们定义了一个包含三行两列的网格。该属性通过指定区域的名称来定义布局。然后，可以使用该属性将每个网格项定位在其相应区域内。grid-template-areasgrid-area
网格属性和值
CSS 网格提供了广泛的属性和值，允许您自定义网格的布局和行为。让我们探索一些最常用的：
grid-template-rows和grid-template-columns
and 属性用于定义网格中行和列的大小和数量。您可以使用不同的单位（如像素、百分比或单位）指定大小。grid-template-rowsgrid-template-columnsfr
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
}
grid-template-areas
该属性允许您使用命名网格区域定义网格的布局。可以使用网格模板语法指定区域，其中每行表示一行，每个单词表示一个网格项。grid-template-areas
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
grid-gap
该属性设置网格项之间的间距大小。它接受两个值：第一个表示行之间的间距，第二个表示列之间的间距。grid-gap
.grid-container {
display: grid;
grid-gap: 10px 20px;
}
grid-row和grid-column
和属性允许您在特定行和列上定位网格项。您可以使用线号或命名线指定网格项的起始位置和结束位置。grid-rowgrid-column
.grid-item {
grid-row: 2 / 4; /* Starts at row line 2 and ends at row line 4 */
grid-column: sidebar; /* Placed in the column named "sidebar" */
}
justify-items和align-items
and 属性分别定义网格项沿行轴和列轴的位置。您可以使用不同的值（如 、、 和）来控制对齐方式。justify-itemsalign-itemsstartendcenterstretchbaseline
.grid-container {
display: grid;
justify-items: center; /* Aligns items along the row axis */
align-items: center; /* Aligns items along the column axis */
}
实例
现在我们已经介绍了 CSS Grid 的基本概念和属性，让我们看一些实际示例来演示它的用法。
示例 1：简单网格布局
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid-item {
background-color: #eaeaea;
padding: 20px;
}
在此示例中，我们使用 创建一个网格，其中包含三个大小相等的列，并且网格项之间的间距为 10 像素。每个网格项都应用了背景色和填充。grid-template-columnsgrid-gap
示例 2：响应式网格布局
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
在此示例中，我们使用 and 函数创建响应式网格布局。该值允许网格根据可用空间自动调整列数。该函数为每列设置最小和最大大小，确保它们不会变得太小或太大。repeat()minmax()auto-fitminmax()
结论
CSS Grid 是一个功能强大的布局系统，可提供对网页设计的灵活性和控制。它使您可以轻松创建响应式和复杂的布局。通过了解 CSS 网格的关键概念和属性，您可以释放其全部潜力并创建视觉上令人惊叹的 Web 布局。
在本文中，我们介绍了 CSS Grid 的基础知识，包括网格容器、网格项、网格线和网格轨道。我们还探索了各种属性和值，这些属性和值使您能够自定义网格的布局和行为。最后，我们提供了实际示例来演示CSS网格在实际场景中的使用。
CSS Grid为设计现代和响应式网页布局开辟了无限的可能性。