grid-area写法说明

grid-area: 行 / 列 / 行 / 列

1. grid-area: 1 / 1 / 2 / 2; /* 将它放入到第一个网格单元中 */

由于默认项目是跨越一行一列的，所以可以简写成下面的格式

grid-area: 1 / 2;

2. grid-area: 1 / 1 / 3 / 4;

通常的情况是我们只关心跨越几行几列，并不关心它的结束行号，所以还可以这样写:

grid-area: 1 / 1 / span 2 / span 3;

3. grid-area: 1 / 1 / span 1 / span 3;

因为item1默认的位置是1 / 1，所以上述样式可以简写成:

grid-area: span 1 / span 3;

之前说过，项目默认的是跨1行1列，所以，可以简写成如下格式:

grid-area: auto / span 3;

此时 auto = span 1

grid-area：参数数量不同，意义不同

1. 值中只有span

单值： 跨的行数。

双值： 跨的行与列数，如果只想设置列数，就必须设置行数（auto—）。

2. 值中有span和编号

双值：没有span，默认跨1行1列，grid-area： 2 / 3；

2.2 三值：省略列结束编号或跨的数量，此时前面的值可使用auto；

2.3 四值：最完整的语法。

出处：小白都觉得好用的CSS布局属性Grid