创建网格
设置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;
这将使项目从左侧网格的第一条垂直线开始，并跨越网格的第三条线，占用两列。