基础 CSS 网格

CSS grid 是一个 CSS 模块，用于创建类似这样的布局：

它用于 CSS 布局和定位。

对于初学者来说，CSS 网格系统包含许多晦涩难懂的术语，乍一看令人困惑。

网格属性由行和列组成。

从上图可以看出，

学生们；

埃尔维斯、查尔斯和詹姆斯在第一列。
史蒂夫、乔和彼得在第二列。
丹、杰克和保罗在第三列。 克莱尔、玛莎和简在
第四列。

总共有 4 列。

还，

埃尔维斯、史蒂夫、丹和克莱尔坐在第一排。
查尔斯、乔、杰克和玛莎坐在第二排，
詹姆斯、彼得、保罗和简坐在第三排。

因此，共有 4 列 3 行。

下图中，第一列有 3 行，第二列有 2 行。

既然我们已经了解了行和列的概念，我们就可以将这些知识应用到 CSS 网格布局中。

下面所示的布局是一个由 4 列和 2 行组成的方块。

让我们继续阅读，看看这神奇的一幕是如何实现的！
在 HTML 代码中，我们有：

接下来是造型设计：

首先，我们需要将代码块放置在一个容器中，也就是HTML 代码中的`<section>`
标签。 接下来，
我们将`<section> ` 标签的 `display` 属性设置为 `grid`，以便浏览器知道`<section>`标签内的所有内容都应该以网格布局显示。

.container{display:grid;}

尝试运行这些代码，你会发现没有任何变化。至少目前是这样。

接下来，
我们需要告诉浏览器我们希望数据块以多少行和多少列的形式排列。
为此，
请键入：

。容器 {
  显示方式：网格；
  grid-template-rows: repeat;
  grid-template-columns: repeat;
}

先别运行任何程序。
我们来解释一下这些。

由于我们要创建 2 行 4 列，因此
我们的样式如下：

。容器 {
  显示方式：网格；
  grid-template-rows:repeat(2, );
  grid-template-columns: repeat(4, );
}

等等！等等！！
还没完成；
我们需要为每个方块指定具体的宽度和高度。

我们可以单独设置每个模块的样式，但这既费时，也会导致代码混乱。
那么，更好的方法是什么呢？
非常简单。只需将
以下代码添加到您的 CSS 样式中：

。容器 {
  显示方式：网格；
  grid-template-rows: repeat(2,60px);
  grid-template-columns: repeat(4,1fr);
}

这里，
60px 代表每个区块的高度，1fr 代表宽度。
当然，
您可以使用任何值（甚至可以设置为自动）和任何单位（px、em、fr、% 等）。
尝试调整行和列，直到您充分掌握 CSS 网格系统。

是的，
看起来不错，但有个小问题，那就是间距。CSS网格的间距我们用grid-gap
来设置。

grid-gap 属性与 css margin 非常相似，它们对块/元素的作用方式相同。

同样，
Margin: 50px 会被解释为：

margin-top: 50px
下边距：50px
右边距：50像素
左边距：50像素

margin-top: 20px
margin-bottom: 20px
右边距：30像素
margin-left: 30px;

网格行间距：50像素
网格列间距：50像素

网格行间距：20像素
网格列间距：30px；

。容器 {
  显示方式：网格；
  grid-template-rows: repeat(2,60px);
  grid-template-columns: repeat(4,1fr);
  网格间距：10px；
}

瞧！

注意：此处发布的代码片段仅包含网格样式，因此无法输出与显示图片中完全相同的颜色和其他样式。