持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
grid 模板行属性
你使用 CSS 行属性来设置每列的高度。你还可以使用它来定义要在项目中设置的行数。
你可以使用 实现 CSS 网格行属性grid-template-row，如下所示：
grid-template-row: 50px 50px;
上面的代码显示我们总共有两行，这两行是50px高的。
请注意，我们也可以通过简单地使用来一次将 column 和 row 属性分配给我们的 HTML 代码gird-template。Grid-template是表示grid-template columnand的另一种方式grid-template-row。
例如：
grid-template: 50px 50px / 100px auto 100px;
grid-template-column上面的代码将为你提供与和相同的结果grid-template-row。
要使用该grid-template属性，你必须先将值分配给行，然后再分配列的值，就像上面的代码一样。50px 50px用于行，而用于100px auto 100px列。
记住这一点的一种方法是考虑字母 L：
网格模板
试试这个，自己看看。
一列 100px 自动 100px 和 50px 行 50px 的网格
柱间隙特性
顾名思义，它是一个网格属性，用于在容器中的两列或多列之间分配一个空间。你可以通过使用该column-gap属性并为其赋值来做到这一点。例如：
column-gap: 20px;
从上面的代码中，你可以看到20px为列分配了一个间隙。
20px 列间距
行间隙属性
就像column-gap,row-gap是一个 CSS 属性，它在容器中的两行或多行之间分配一个空间。例如：
row-gap: 50px;
行间距：50px；
请注意，我们还可以使用该gap属性为容器的列和行分配间隙。为此，我们只为容器的列和行分配一个值，就像我们在上面的代码中所做的那样。
这是一个例子：
gap: 20px;
间隙：20px
从上图中，我们可以看到 a gapof20px被设置为容器的列和行，使它们等间距。
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;
justify-content：空间环绕
space-between
就像space-around属性一样，space-between平均分配容器中的项目，其中容器中的每个项目与容器中的下一个项目具有相等的空间。它占据了容器的整个宽度。
这段代码可以这样执行：
justify-content: space-between;
对齐内容：之间的空格
space-evenly
正如名称所述，此属性均匀分布容器中的项目，其中容器中的每个项目与容器中的下一个项目具有相等的空间。
这段代码可以这样执行：
justify-content: space-evenly;
justify-content：空间均匀；
请注意，所有justify-content属性都水平放置其项目/元素。尝试自己做以更了解它。
