上查看所有课程
CSS Grid 是一个二维布局系统，它允许设计师和开发人员轻松创建复杂且响应式的布局。
Grid 布局创建由行和列组成的网格结构，并将元素定位在网格的各个单元格中。
下图显示了一个简单的网格布局，包含三行和三列。
Grid 允许行和列具有灵活性，可以调整大小以适应可用的屏幕空间。
这意味着我们可以创建在所有设备上看起来美观且运行良好的布局，无论屏幕尺寸如何。例如，我们可以在大屏幕上创建两列的布局，而在小屏幕上创建一列的布局。
注意：在基于网格的布局之前，开发人员使用了表格，然后是浮动、定位和内联块。然而，这些都不是为布局目的而设计的，并且存在一些限制。
Grid 布局的工作原理
Grid 布局包含以下步骤：
1. 设置 Grid 容器
基于网格的布局的第一步是定义一个网格容器。该容器将容纳网格项目。
display: grid 声明将一个元素转换为网格容器。
下图显示了一个简单的网格容器。
2. 创建 Grid 结构
第二步涉及通过定义行和列来指定网格的结构。
grid-template-rows 和 grid-template-column 属性允许在网格容器中指定行和列。
在下图的网格容器中，我们设置了两行三列。
3. 将项目放置在 Grid 单元格中
第三步也是最后一步是将项目放置在网格的各个单元格中。这些项目可以是我们要定位在网格布局中的任何 HTML 元素。
在下图中，我们在一个包含三行三列的网格容器中放置了不同的 HTML 元素。
CSS Grid 使我们能够灵活地创建具有不同大小的行和列的复杂二维设计。
Grid 布局术语
Grid 布局包含以下术语：
Grid 容器和 Grid 项目
Grid 容器是包含 Grid 项目的父元素。Grid 项目是 Grid 容器的直接子元素。
下图显示了一个具有三个 Grid 项目的 Grid 容器。
这是一个创建 Grid 容器和 Grid 项目的代码片段。
<div class="container">
<div class="item item-1"> </div>
<div class="item item-2"> </div>
<div class="item item-3"> </div>
</div>在这里，具有 container 类的 div 是 Grid 容器，它包含三个 Grid 项目。
Grid 线
Grid 线是指划分网格的垂直线和水平线。水平线分隔行，垂直线分隔列。例如，
在这里，黄色线是 Grid 线。
Grid 轨道
Grid 轨道是指两条 Grid 线之间的相邻空间。这可以是垂直或水平空间。例如，
Grid 区域
Grid 区域是指由四条 Grid 线包围的空间。一个 Grid 区域可以包含任意数量的 Grid 单元格。例如，
这里，彩色空间代表一个 Grid 区域。
Grid 单元格
Grid 单元格是由行和列的交叉点形成的单个单元。例如，
这里，彩色空间代表 Grid 的一个单元格。
Grid 间隙
Grid 间隙是指网格中行和列之间的空间。例如，
Grid 布局包含用于Grid 容器和Grid 项目的几个属性。我们将在下一篇文章中介绍它们。