使用 CSS 创建布局（c 部分）- 前端开发系列第 5 部分

CSS Grid

结论

本文是我之前文章《使用 CSS 进行布局（B 部分）——前端开发系列第 5 部分》的续篇。

目录

• CSS Grid
• 结论

CSS Grid

从上一篇文章来看，我相信你现在已经熟悉了flex。

当在任何元素上设置display 属性grid时，该元素会变成一个容器。与提供“单向”元素调整流的grid不同，此容器允许双向调整。flex-container

<!-- index.html -->
<div class='grid-container'>
  <div class='grid-item'></div>
  <div class='grid-item'></div>
  <div class='grid-item'></div>
  <div class='grid-item'></div>
</div>

/* style.css */
.grid-container {
  display: grid;
  background-color: pink;
  grid-template-columns: auto 450px;
  grid-template-rows: 100px 100px;
  width: 600px;
  padding: 20px;
  grid-gap: 30px;
}
.grid-item {
  background-color: white;
  border: 5px solid purple;
}

本文后续内容会用到这段代码。

结果： 此外，随着我​​们继续进行，上面的图表会变得更加清晰。

• 网格项的垂直线被称为（正如您可能已经猜到的）列。它们被称为grid columns。
• 水平线被称为行，也称为grid rows。
• 网格列之间的间隙称为间距column gap。列间距可以通过属性进行设置grid-column-gap。
• 行列之间的间距称为间距row gap。行之间的间距可以通过属性进行设置grid-row-gap。
• 行间距和列间距可以同时设置grid-gap。

grid-gap: 30px;- 鉴于上述代码对图表的影响，现在应该能够理解这一行代码的含义了。

• 列之间的线条称为column lines。
• 行之间的线条称为row lines。

与 CSS 网格相关的属性

这些属性仅在容器的显示方式设置为网格时有效。

• grid-template-columns通过此属性，您可以指定容器中的列数。在上面的代码中，
  grid-template-columns: auto 450px;
  这行代码使网格容器包含两列，宽度分别为 1auto和 2。450px这
  意味着第二列的宽度为 450 像素，而第一列将填充剩余的可用空间。

  您可以指定精确的尺寸，例如grid-template-columns: 10px 450px 40px 100px;。这意味着该列将容纳四列，每列的宽度都指定为指定值。

• grid-template-rows通过此属性，您可以指定网格容器的行数。在上面的代码中，我们
  grid-template-rows: 100px 100px;指定了网格容器的两行及其各自的高度。

注意：如果grid-template-rows未指定，则网格容器将使用根据grid-template-columns子元素数量确定的最大行数。

另请注意：如果子元素的数量超过容器提供的网格单元数量，网格可能会显得杂乱无章。这应该不足为奇。

回到我们上面的图表；

现在这张图应该更清楚了吧？ 😊

我们来聊聊其他房产吧……

• justify-content
  属性的值包括：
  space-evenly | space-between | space-around | center | stretch | start | end
  这些值与 flex 容器的 justify-content 属性类似。唯一的区别是 flex-start 用作起始位置，flex-start 用作结束位置。

• 对齐内容，均匀分布 | 间距 | 周围间距 | 居中 | 拉伸 | 开始 | 结束。
The values for this property also include:


这与弹性容器中的 align-content 属性类似。上图也有相关描述。

如果您对以上提到的术语不熟悉，请查看这篇关于flex的文章。

结论

您可能已经注意到，CSS flex 布局一次只能控制一个方向，而 CSS grid 布局可以同时控制两个方向。
但是，它们各有其适用场景。

想更深入地了解网格系统的使用方法吗？我强烈推荐这篇文章（个人观点）：《CSS网格系统详解》（Complete CSS Grid）- css-tricks.com

您可以在评论区提问或发表评论，也可以在推特上联系我。

我还在我的个人网站dillionmegida.com上撰写关于前端 Web 开发的文章。