网格布局

大约 1 分钟

CSS 网格布局引入了二维网格布局系统，可用于布局页面主要的区域或小型用户界面元素。

我们通过将容器设置为 grid 或 in-line grid 的 display属性来实现 CSS 网格容器属性。

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

例如：

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

上面的代码显示我们有三列。第一列和第三列占用屏幕宽度的 100 像素，而第二列占用屏幕的剩余宽度（自动）。

row 属性来设置每列的高度。你还可以使用它来定义要在项目中设置的行数。

例如：

grid-template-row: 50px 50px;

上面的代码显示我们总共有两行，这两行高 50px。

[!NOTE]
我们还可以通过简单地使用 gird-template 将 column 和 row 属性一次性分配给我们的 HTML 代码。Grid-template 是表示 grid-template column 和 grid-template-row 的另一种方式。

例如：

 grid-template: 50px 50px / 100px auto 100px;

要使用 grid-template 属性，你必须先将值分配给行，然后再分配列的值，就像上面的代码一样。 50px 50px 用于行，而 100px auto 100px 用于列。

用于在容器中的两列或多列之间分配一个空间。你可以通过使用 column-gap 属性并给它一个值来做到这一点。

column-gap: 20px;

最后，一个用来学flex的布局网站