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 四值:最完整的语法。