跨越单元格 - span

使用 span 关键字让项目跨越多个单元格

🤔 span 与网格线的区别

写法	含义	特点
`grid-column: 1 / 3`	从第1条线到第3条线	明确指定起始和结束位置
`grid-column: span 2`	跨越2列	相对跨越，起始位置自动

效果相同的情况：当项目从第1列开始时，1/3 和 span 2 效果一样

效果不同的情况：当需要指定具体位置时，必须用网格线编号

          .span-2 {

            grid-column: span 2;

          }

          .span-3 {

            grid-column: span 3;

          }

基础示例：span 关键字

跨2列

跨3列

跨4列（整行）

对比示例：span vs 网格线

方法1
grid-column: 1 / 3

自动填充

方法2
grid-column: span 2

自动填充

👆 上面两个橙色项目效果相同，都占2列

关键区别：指定位置

指定位置
grid-column: 2 / 4

自动位置
grid-column: span 2

👆 蓝色项目指定从第2列开始，绿色项目自动从第1列开始

          总结：何时使用哪种方式？

          /* 使用 span：不关心具体位置，只关心跨越几列 */

          .item {

            grid-column: span 2; /* 跨2列，位置自动
          */

          }

          /* 使用网格线：需要精确控制位置 */

          .item {

            grid-column: 2 / 4; /* 必须从第2列开始
          */

          }

          /* 组合使用：指定起始位置 + 跨越列数 */

          .item {

            grid-column: 2 / span 3; /*
          从第2列开始，跨3列 */

          }