css 网格属性总结

创建网格

设置display属性为grid

display:grid

设置网格的列

grid-template-columns属性：

grid-template-columns: 50% 50%;

设置网格的行

grid-template-rows属性：

grid-template-rows: 20px 20px;

网格属性的单位

• fr：将列或行设置为可用空间的一小部分
• auto：自动将列或行设置为其内容的宽度或高度
• %：将列或行调整为容器宽度的百分比
• px：使用像素
• em：使用尺寸

网格的列间隙

grid-column-gap属性：这将在我们所有列之间创建10px的空白空间。

grid-column-gap: 10px;

网格的行间隙

grid-row-gap：为行高创建间隙5px。

grid-row-gap:5px;

快速添加网格间隙

grid-gap属性：行间隙10px，列间隙20px

grid-gap:10px 20px;

如果只有一个值，将同时作用于行间隙和列间隙

使用网格列控制间距

到目前为止，已讨论的所有属性都适用于网格容器。该grid-column属性是第一个用于网格项目本身的属性。

假设创建网格的水平和垂直线称为线。这些行的编号从网格左上角的1​​开始，向右移动以表示列，向下移动以表示行，向上计数。

这是一个例子：

grid-column: 1 / 3;

这将使项目从左侧网格的第一条垂直线开始，并跨越网格的第三条线，占用两列。