原文： How to Use CSS Grid Layout – Grid Properties Explained with Examples
你是否曾经在 Web 浏览器上定位项目时遇到过问题？也许每次你试图想一个解决方案时，你都会感到疲倦并放弃。
如果是这样，请继续关注，因为我展示了一种以最小压力或无压力解决此类问题的新方法。
欢迎大家。在本教程中，我们将介绍如何使用 CSS 网格布局。
首先，我们将了解 CSS Grid 是什么以及它的用途，然后我们将介绍 CSS 网格的特性、我们应该研究它的原因，以及它给我们的项目带来的好处。最后，我们将讨论何时最好使用它。
什么是 CSS 网格？
那么什么是 CSS 网格？
CSS Grid 是一种二维布局，可用于在 Web 上创建响应式项目。Grid 项目按列排列，你可以轻松定位行，而不必弄乱 HTML 代码。
这是对 CSS Grid 布局的简明定义：
CSS Grid 是一个强大的工具，允许在 Web 上创建列和行的二维布局。（来源）
CSS 网格布局的特点
灵活的尺寸
你可以使用 fr 单位（分数单位）将任何指定的像素值分配给网格，这将使你的网格井井有条且响应迅速。
项目放置
CSS 网格使你可以更轻松地将容器中的项目放置在你希望它们位于的任何区域，而不必弄乱 HTML 标签。
对齐控件
使用 CSS Grid，容器中元素/项目的对齐比以往任何时候都容易。在容器中，你现在可以根据需要水平和垂直排列元素/项目。
CSS 网格的好处
CSS Grid 非常灵活且响应迅速。它使创建二维布局变得容易。CSS Grid 也易于使用，并且得到大多数 Web 浏览器的支持。
CSS 网格使你的 HTML 标签更清晰，并为你提供更多的灵活性。这部分是因为你无需更改标签（HTML 代码）即可使用 CSS 网格更改项目的位置。
总而言之，CSS 网格布局帮助我们使用列和行构建更复杂的布局。
什么时候应该使用 CSS 网格
你几乎可以在 Web 开发的任何方面使用 CSS Grid，特别是在这些情况下：
例如，当我们有一个复杂的设计布局要实现时，CSS Grid 比 CSS float 属性更好。这是因为 Grid 是二维布局（具有列和行），而 CSS float 属性是一维布局（具有列或行）。
当我们需要元素之间的空间或间隙时，Grid 也是一个不错的选择。通过使用 CSS grid gap 属性，控制两个元素的间距比使用 CSS 的 margin 和 padding 属性容易得多，后者可能会使事情变得复杂。
CSS 网格属性
CSS 网格布局由许多网格属性组成。现在我们来看看其中的一些，以便我们学习如何使用它们。
网格容器属性
这是一个包含网格项目/元素的 CSS 网格属性。我们通过将容器设置为 grid 或 in-line grid 的 display属性来实现 CSS 网格容器属性。
例如：
display: grid;or
display: in-line grid;Grid-template-column 属性
这是一个用于设置每列宽度的属性。它还可以定义要为项目设置的列数。
你可以使用 grid-template-column 实现它。
例如：
grid-template-column: 100px auto 100px;上面的代码显示我们有三列。第一列和第三列的宽度设置为 100px，第二列（中间列）的宽度设置为 auto。
这意味着随着屏幕尺寸的增加，第一列和第三列占用屏幕宽度的 100 像素，而第二列占用屏幕的剩余宽度（自动）。
Grid-template-row 属性
你使用 CSS row 属性来设置每列的高度。你还可以使用它来定义要在项目中设置的行数。
你可以使用 grid-template-row 实现它，如下所示：
grid-template-row: 50px 50px;上面的代码显示我们总共有两行，这两行高 50px。
请注意，我们还可以通过简单地使用 gird-template 将 column 和 row 属性一次性分配给我们的 HTML 代码。Grid-template 是表示 grid-template column 和 grid-template-row 的另一种方式。
例如：
grid-template: 50px 50px / 100px auto 100px;上面的代码将为你提供与 grid-template-column 和 grid-template-row 相同的结果。
要使用 grid-template 属性，你必须先将值分配给行，然后再分配列的值，就像上面的代码一样。 50px 50px 用于行，而 100px auto 100px 用于列。
记住这一点的一种方法是考虑字母 L：
试试这个，你自己看看。
Column-gap 属性
顾名思义，它是一个网格属性，用于在容器中的两列或多列之间分配一个空间。你可以通过使用 column-gap 属性并给它一个值来做到这一点。例如：
column-gap: 20px;从上面的代码中，你可以看到为该列分配了 20px 的空间。
Row-gap 属性
就像 column-gap 一样，row-gap 是一个 CSS 属性，它在容器中的两行或多行之间分配一个空间，例如：
row-gap: 50px;
请注意，我们还可以使用 gap 属性为容器的列和行分配空间。为此，我们只为容器的列和行分配一个值，就像我们在上面的代码中所做的那样。
这是一个例子：
gap: 20px;
从上图中，我们可以看到容器的列和行都被设置了 20px 的空间，使它们等间距。
Justify-content 属性
这是一个网格属性，用于在容器中水平定位项目（列和行）。它显示 Web 浏览器如何定位项目（列和行）周围的空间。
justify-content 属性有六个值：
Startendcenterspace-aroundspace-betweenspace-evenly
Start
这会将项目定位在浏览器的左侧，代码如下：
justify-content: start;
End
这会将项目定位在浏览器的右侧，代码如下：
justify-content: end;
Center
这会将项目定位在浏览器的中心，代码如下：
justify-content: center;
Space-around
此属性平均分配容器中的项目，其中容器中的每个项目与下一个容器具有相等的空间，代码如下：
justify-content: space-around;
Space-between
就像 space-around 属性一样，space-between 均匀地分配容器中的项目，其中容器中的每个项目与容器中的下一个项目具有相等的空间，它占据了容器的整个宽度。
代码如下：
justify-content: space-between;
Space-evenly
顾名思义，此属性均匀地分配容器中的项目，其中容器中的每个项目与容器中的下一个项目具有相等的空间，代码如下：
justify-content: space-evenly;
请注意，所有 justify-content 属性都将它们的项目/元素水平放置。尝试自己写代码以更了解它。
Align-content 属性
Align-content 与 justify-content 相反。你可以使用 align-content 属性在容器中垂直定位项目。
就像 justify-content 一样，align-content 属性有六个值：
Startendcenterspace-aroundspace-betweenspace-evenly
Start
这会将项目定位在浏览器的顶部，代码如下：
align-content: start;
End
这会将项目定位在浏览器的底部，代码如下：
align-content: end;
Center
这会将项目定位在浏览器的中心，代码如下：
align-content: center;
Space-around
此属性沿容器的侧面均匀分布项目，其中容器中的每个项目与下一个项目垂直具有相等的空间，代码如下：
align-content: space-around;
Space-between
就像 space-around 属性一样，space-between 均匀分布容器中的项目，其中容器中的每个项目与容器中的下一个项目具有相等的空间，并在垂直方向占据容器的整个宽度。
这段代码可以这样执行：
align-content: space-between;
Space-evenly
顾名思义，此属性均匀分布容器中的项目，其中容器中的每个项目与下一个项目垂直具有相等的空间，代码如下：
align-content: space-evenly;
总结
在今天的文章中，我们研究了 CSS 网格布局是什么、为什么要学习它，以及 CSS Grid 属性。
感谢你阅读本文。
祝你编程愉快！