使用 CSS 网格进行网页布局：基础知识

什么是 CSS Grid？

入门

位置和调整大小

什么是 CSS Grid？

CSS 网格是 CSS 中的一项技术，它允许开发人员更轻松、更一致地跨浏览器创建响应式网页设计布局。使用 CSS 网格，我们可以将元素从此布局转换 为：

好网站和坏网站的区别在于，网站内容的组织结构是否能够让用户轻松上手。您的网站应该简洁明了，并拥有易于理解的导航系统，以打造实用的网页布局。

易于理解的布局能让网站访客轻松找到网站上有价值的重要信息。如果网页内容难以找到，访客会感到焦虑，选择离开网站，并且可能不再回来。

入门

开始吧！要创建网格，我们首先需要创建一个<div>类名为 grid 的元素。该<div>标签用作容器，将 HTML 文档划分为多个部分。我们使用<div>元素将 HTML 元素分组，并一次性将 CSS 样式应用于多个元素。

<div class="grid">

</div>

太棒了！这个<div>元素表明我们的网页上有一个名为 grid 的指定部分。现在，我们需要在网格中添加用于设置样式的项目。我们将通过添加包含<div>元素的小部分并赋予它们各自的 ID 来实现。

<div class="grid">
   <div id="item-1"> 1 </div>
   <div id="item-2"> 2 </div>
   <div id="item-3"> 3 </div>
   <div id="item-4"> 4 </div>
</div>

至此，我们得到了一个大容器，里面装满了构成网格的小容器。让我们通过修改 CSS 将容器变成网格。

.grid {
    display: grid;
}

现在，让我们看看我们的网格是什么样子的：

因为我们还没有在网格中定义任何行或列，所以元素将保持堆叠状态。让我们通过向网格类添加两个新属性来改变这种情况：grid-template-columns和grid-template-rows。

.grid {
     display: grid;
     grid-template-columns: 100px 100px;
     grid-template-rows: 50px 50px;
}

grid-template-columns和属性的值分别grid-template-rows决定了列宽（100px）和行高（50px）。现在，我们的网格看起来如下：

太棒了！让我们通过添加以下属性在网格元素之间创建一个小间隙grid-gap：

.grid {
     display: grid;
     grid-template-columns: 100px 100px;
     grid-template-rows: 50px 50px;
     grid-gap: 10px;
}

通过添加grid-gap属性，我们得到以下结果：

位置和调整大小

除了网格行和列之外，我们还有网格线来标识列的起点和终点。

从上图我们可以看到，虽然我们有 3 列，但我们有 4 条网格线，其中：

• 第 1 列从第 1 行开始，到第 2 行结束
• 第 2 列从第 2 行开始，到第 3 行结束
• 第 3 列从第 3 行开始，到第 4 行结束

要创建多维布局，我们需要做的就是修改网格中每个元素的起始和结束位置。让我们修改布局，使网格中的第一个元素跨越所有三列。

在我的 HTML 文件中，我将创建一个<div>类名为 grid 的元素，其中包含九个具有匹配 ID 的唯一元素：

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

现在我们已经在 HTML 文件中创建了所有元素，接下来让我们为网格类添加样式，添加 3 列宽 300px 和 3 行高 300px。我还指定了网格中的第一个元素应该跨越整整 3 列，并通过两个新属性 和 指定了列的起始和终止grid-column-start行grid-column-end。

.grid {
   display: grid;
   grid-template-columns:300px 300px 300px;
   grid-template-rows:300px 300px 300px;
   grid-gap:15px;
}

#item-1 {
   grid-column-start:1;
   grid-column-end:4;
}

让我们看看上面的样式如何影响我们的网格：

由于我们已将网格中的第一个元素设置为跨越所有 3 列，因此网格中的所有其他元素均已被推到下一个可用列。

指定元素应跨越哪些网格线的另一种方法是使用简写grid-column属性，该属性采用两个值：起始网格线和结束网格线。

#item-1 {
   grid-column: 1/4;
}

这就是 CSS 网格的基础知识！使用我们之前讲过的属性，您现在可以创建最适合您网站的多维布局。让我们看另一个示例，其元素数量与上一个示例相同，但 CSS 样式有所不同：

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 200px 100px 100px;
    grid-template-rows: repeat(5, 100px);
}

#item-1 {
    grid-column:1/3;
}

#item-4 {
    grid-column:2/4;
}

#item-5 {
    grid-column:1/4;
}

#item-9 {
    grid-column:1/4;
}

上述样式产生以下网格：

感谢阅读本教程！如果你想了解更多关于 CSS 网格布局的知识，请查看以下精彩资源：

• 网格小动物：https://www.gridcritters.com/
• W3Schools：https://www.w3schools.com/css/css_grid.asp
• CSS 技巧：https://css-tricks.com/snippets/css/complete-guide-grid/
• 网格示例：https://gridbyexample.com/examples/
• 免费学习 CSS 网格：https://scrimba.com/g/gR8PTE