网格布局
CSS网格布局是一种二维的布局方式，它能够将一个HTML元素分成若干行和列，形成一个网格系统，让我们可以更灵活地控制元素在页面上的位置和大小。
CSS网格布局的核心是通过定义网格容器（grid container）和网格项（grid item）来实现布局。网格容器是将一组网格项包裹起来的容器，通过设置其display属性为grid或inline-grid来创建网格布局。网格项则是被包含在网格容器内的元素，可以通过设置其所在网格单元格的行列位置和跨度来控制其在网格中的位置和大小。
下面是一个简单的示例，使用CSS网格布局来实现一个两列的页面布局：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.item {
background-color: #ccc;
padding: 20px;
}
上面的代码中，我们先创建了一个包含四个子元素的网格容器.container，并将其设置为网格布局。然后，我们通过grid-template-columns属性来定义网格的列，这里我们定义了两列，每列宽度为1个弹性比例（1fr），表示两列平均分配页面宽度。最后，我们通过grid-gap属性来定义网格项之间的间隔距离。
在网格项.item中，我们设置了一个背景颜色和内边距，这样我们就可以看到网格项在网格中的位置和大小了。
CSS网格布局不仅支持基本的行列布局，还支持更高级的功能，例如网格项的自适应大小、网格项的自动排序、网格的命名区域等等。总体来说，CSS网格布局是一种功能强大、灵活性高的布局方式，适合用于各种不同的网站和应用程序的布局设计。
