CSS 网格布局：初学者指南

你好呀，未来的网页设计超级巨星！今天，我们将踏上一段激动人心的旅程，探索 CSS 网格布局的世界。别担心如果你之前从未写过一行代码——我会成为你的友好向导，我们会一步步来。在本教程结束时，你将能够像专业人士一样创建出时尚、响应式的布局！

CSS - Grid Layout

什么是网格布局？

想象你正在一个房间里布置家具。你可能会在心中将空间划分为行和列，以帮助你整齐地组织一切。这正是 CSS 网格布局为网页所做的！

CSS 网格布局是一个强大的工具，它允许我们在网页上创建二维布局。就像在你的网页上有一个看不见的网格，你可以将内容放置在你想要的位置。酷不酷？

网格元素

在我们深入之前，让我们先熟悉一些关键术语：

网格容器：这是包含所有网格项目的父元素。
网格项目：这些是网格容器的子元素。
网格线：构成网格结构的分隔线。
网格轨道：网格线之间的空间（行或列）。
网格单元格：行和列的交叉点。
网格区域：由四条网格线包围的矩形空间。

如果现在听起来有点令人困惑，别担心。我们很快就会在实践中看到它们！

display Grid 属性

让我们从一个简单的例子开始。假设我们想创建一个基本的 3x3 网格。以下是如何操作的：

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}

让我们分解一下：

我们在容器上设置了 display: grid; 来激活网格布局。
grid-template-columns: auto auto auto; 创建了三个等宽的列。
我们为网格项目设置了样式以供查看。

瞧！你已经创建了自己的第一个网格布局。多么激动人心！

网格行和列

现在，让我们对我们的行和列进行更具体的设置。我们可以定义确切的大小：

.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 80px 200px;
}

这创建了一个网格，具有：

三个列：100px、200px 和 100px 宽
两行：80px 和 200px 高

你也可以使用不同的单位，如百分比或新的 fr 单位（可用空间的一部分）：

.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}

这创建了一个类似的布局，但列会根据可用空间流动地调整大小。

网格间隙

有时，你希望在网格项目之间留出一些空间。这时 grid-gap 就派上用场了：

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}

这会在所有行和列之间添加 10px 的间隙。你也可以分别设置行和列的间隙：

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 10px;
grid-column-gap: 20px;
}

CSS 网格线

记得我们之前提到的网格线吗？我们可以使用它们来精确地定位我们的项目：

<div class="grid-container">
<div class="item1">页头</div>
<div class="item2">菜单</div>
<div class="item3">主体</div>
<div class="item4">右侧边栏</div>
<div class="item5">页脚</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 300px 100px;
gap: 10px;
}

.item1 {
grid-column: 1 / span 4;
}

.item2 {
grid-row: 2 / span 2;
}

.item3 {
grid-column: 2 / span 2;
}

.item4 {
grid-column: 4;
grid-row: 2;
}

.item5 {
grid-column: 2 / span 3;
grid-row: 3;
}

这创建了一个复杂的布局，包括一个跨满宽度的页头、一个侧边菜单、主要内容区域、右侧边栏和页脚。玩转这些值，看看它们如何影响布局！

CSS 网格属性参考

以下是一些常见的 CSS 网格属性的手册：

属性	描述
display: grid;	定义一个网格容器
grid-template-columns	指定列的数量和大小
grid-template-rows	指定行的数量和大小
grid-gap	设置网格项目之间的间隙
grid-column-start	指定网格项目的开始位置
grid-column-end	指定网格项目的结束位置
grid-row-start	指定网格项目的开始位置
grid-row-end	指定网格项目的结束位置
grid-area	指定网格项目的大小和位置

就是这样！你已经迈出了进入 CSS 网格布局奇妙世界的第一步。记住，熟能生巧，所以不要害怕尝试不同的布局和属性。在你意识到之前，你将能够轻松地创建出复杂、响应式的布局。

祝编码愉快，未来的网格大师们！

Credits: Image by storyset