持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

首先，我们将了解 CSS Grid 是什么以及它的用途。然后我们将介绍 CSS Grid的特性，我们应该研究它的原因，以及它给我们的项目带来的好处。最后，我们将讨论何时最好使用它。

什么是 CSS Grid？

那么什么是 CSS 网格？

CSS Grid 是一种二维布局，可用于在 Web 上创建响应式项目。Grid 项目按列排列，你可以轻松定位行，而不必弄乱 HTML 代码。

这是 CSS Grid 布局的简明定义：

CSS Grid 是一个强大的工具，允许在 Web 上创建列和行的二维布局。（来源）

CSS Grid 布局的特点

灵活性

你可以使用fr单位（分数单位）将任何指定的像素值分配给网格。这将使你的网格井井有条且响应迅速。

条理性

CSS 网格使你可以更轻松地将容器中的项目放置在你望它们位于的任何区域，而不必弄乱 HTML 标记。

简单性

使用 CSS Grid，容器中元素/项目的对齐比以往任何时候都容易。在容器中，你现在可以根据需要水平和垂直排列元素/项目。

CSS Grid的好处

CSS Grid 非常灵活且响应迅速。它使创建二维布局变得容易。CSS Grid 也易于使用，并且得到大多数 Web 浏览器的支持。

CSS 网格使你的标记更清晰（在你的 HTML 代码中）并为你提供更多的灵活性。这部分是因为你不必更改标记（HTML 代码）即可使用 CSS 网格更改项目的位置。

总而言之，CSS Grid Layout 帮助我们使用列和行构建更复杂的布局。

什么时候应该使用 CSS Grid

尽管你几乎可以在 Web 开发的任何方面使用 CSS Grid，但在某些情况下它是理想的。

例如，当我们有一个复杂的设计布局要实现时，CSS Grid 比 CSS float 属性更好。这是因为 Grid 是二维布局（具有列和行），而 CSS 浮动属性是一维布局（具有列或行）。

当我们需要元素之间的空间或间隙时，网格也是一个不错的选择。通过使用 CSS 网格gap属性，两个元素的间距比使用可能最终使事情复杂化的 CSSmargin和属性要容易得多。padding

CSS Grid属性

CSS 网格布局由许多网格属性组成。现在我们来看看其中的一些，以便我们学习如何使用它们。

CSS Grid容器属性

这是一个包含网格项目/元素的 CSS 网格属性。我们通过将容器设置为or的display属性来实现 CSS 网格容器属性。grid``in-line grid

例如：

display: 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：

图像 90

网格模板

试试这个，自己看看。

CSS-GRID-2

一列 100px 自动 100px 和 50px 行 50px 的网格

柱间隙特性

顾名思义，它是一个网格属性，用于在容器中的两列或多列之间分配一个空间。你可以通过使用该column-gap属性并为其赋值来做到这一点。例如：

column-gap: 20px;

从上面的代码中，你可以看到20px为列分配了一个间隙。

列-GAP-1

20px 列间距

行间隙属性

就像column-gap,row-gap是一个 CSS 属性，它在容器中的两行或多行之间分配一个空间。例如：

row-gap: 50px;

ROW-GAP-1

行间距：50px；

请注意，我们还可以使用该gap属性为容器的列和行分配间隙。为此，我们只为容器的列和行分配一个值，就像我们在上面的代码中所做的那样。

这是一个例子：

gap: 20px;

GAP-1

间隙：20px

从上图中，我们可以看到 a gapof20px被设置为容器的列和行，使它们等间距。

对齐内容属性

这是一个网格属性，用于在容器中水平定位项目（列和行）。它显示 Web 浏览器如何定位项目（列和行）周围的空间。

justify-content 属性有六个可能的值：

Start
end
center
space-around
space-between
space-evenly

或者

display: in-line grid;

Grid 模板列属性

这是一个用于设置每列宽度的属性。它还可以定义要为项目设置的列数。

你可以使用实现 CSS 网格列属性 grid-template-column。

例如：

grid-template-column: 100px auto 100px;

上面的代码显示我们有三列。第一列（第一列）和第三列（第三列）的宽度设置为100px。第二列（中间列）的宽度设置为auto。

这意味着随着屏幕尺寸的增加，第一列和第三列占据100px屏幕宽度，而第二列占据屏幕的剩余宽度（即auto）。

如何使用 CSS Grid布局（上）