css grid网格布局

意如其名就是像网一样的布局，类似熟悉的excel表格一样

Grid布局的属性主要在父元素和子元素上。

父元素

首先我们需要确认的是父元素的display的值为grid.

然后只是加这一个属性，并没有效果

那是因为我们还没有设置有几行，几列

行我们用row来表示，列用colum来表示

那列是主轴，默认是1列，所以就会看到上面的，都在一列中，如果我们改成2，那么就会是2列，然后其它的按顺序网下排 用

grid-template-columns来表示，后面的值表示每一列的宽度，有几列就写几个，或者写auto（自适应）

效果 colunm-gap表示列之间的空隙，row-gap表示行之间的空隙

grid-template-rows和列的用法一样

子元素

子元素要做的主要是占几行几列，比如

首先我们要了解下line,很好理解如下图

所以我们可以通过子元素占哪些line来确定它的占位

比如我们想第一个元素占两行两列

属性 x/x 前面表示从哪条线开始，后面表示从哪条线结束

后面的元素按照原来的方式接着排就行了