通过 grid-column 和 grid-row 属性可让子元素在网格布局中跨多行或多列。首先设置父容器 display: grid，并定义 grid-template-columns 和 grid-template-rows 确定网格结构。使用 grid-column 指定子元素跨越的列范围，如 1 / 3 或 span 2；同理，grid-row 控制行跨度，如 1 / 3 或 span 2。两者结合可实现二维跨越，例如 grid-column: 1 / 4 配合 grid-row: 1 / 3 使元素跨3列2行，适用于仪表盘等复杂布局。

要让子元素在网格布局中跨多行或多列，可以通过 CSS Grid 实现。关键在于使用 grid-column 和 grid-row 属性来控制子元素的起始和结束位置。

设置网格容器

首先，确保父元素是网格容器，通过设置 display: grid 来启用网格布局，并定义行和列的结构。

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 三列，每列100px */
  grid-template-rows: repeat(2, 50px);    /* 两行，每行50px */
  gap: 10px;                              /* 子元素之间的间距 */
}

让子元素跨列

使用 grid-column 可以让子元素横跨多列。指定起始列和结束列，或使用 span 关键字表示跨越的列数。

.item {
  grid-column: 1 / 3;   /* 从第1列开始，到第3列之前（即跨2列） */
  /* 或者 */
  grid-column: span 2;  /* 跨越2列，自动决定起始位置 */
}

让子元素跨行

使用 grid-row 可实现跨行效果，语法与 grid-column 类似。

.item {
  grid-row: 1 / 3;     /* 从第1行开始，到第3行之前（跨2行） */
  /* 或者 */
  grid-row: span 2;    /* 跨越2行 */
}

同时跨行和跨列

可以同时设置 grid-column 和 grid-row，让子元素在二维空间中占据多个格子。

.item {
  grid-column: 1 / 4;  /* 跨3列 */
  grid-row: 1 / 3;      /* 跨2行 */
}

基本上就这些。只要父容器是 grid 布局，子元素就能灵活地跨行跨列布局，适合制作仪表盘、卡片网格等复杂界面。