在display:grid中模拟colspan并解决单元格对齐间隙问题

问题原因 #

1. 列宽不匹配：container-row使用4列模板2fr 3fr 2fr 3fr，而container-rowclear用了2列模板2fr 3fr，两类行的label宽度不一致，导致无法对齐。
2. 间隙问题：独立行网格没有统一的间距控制，加上列模板差异，视觉上出现错位和间隙。

方案一：统一行网格模板+跨列设置 #

保留原有HTML结构，仅修改CSS即可实现对齐和colspan效果：

.container {
  width: 95%;
  margin: 10px auto;
  padding: 10px;
  border: 1px solid #f1f1f1;
  box-shadow: 0 6px 6px -2px #6c6c6c;
}

/* 统一所有行的网格列模板，保证列宽一致 */
.container-row, .container-rowclear {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr 3fr;
  column-gap: 10px; /* 列间距可按需调整 */
  margin-bottom: 8px; /* 统一行间距，解决间隙问题 */
}

/* 为container-rowclear的span设置跨列，模拟colspan */
.container-rowclear span {
  grid-column: 2 / 5; /* 占据第2到第4列，对应右侧全部宽度 */
}

方案二：将容器设为全局网格（更贴近Table逻辑） #

把.container作为大网格，所有label和span直接作为网格项，列宽完全统一，行间距由容器控制：

.container {
  width: 95%;
  margin: 10px auto;
  padding: 10px;
  border: 1px solid #f1f1f1;
  box-shadow: 0 6px 6px -2px #6c6c6c;
  display: grid;
  grid-template-columns: 2fr 3fr 2fr 3fr;
  row-gap: 8px; /* 行间距 */
  column-gap: 10px; /* 列间距 */
}

/* 可选：让元素垂直居中对齐 */
.container label, .container span {
  align-self: center;
}

/* 为单列的span设置跨列 */
.container-rowclear span {
  grid-column: 2 / 5; /* 跨3列，占据右侧全部宽度 */
}

两种方案均可实现：

• 所有label宽度完全对齐
• container-rowclear的span模拟table的colspan效果，占据右侧全部空间
• 行之间的间隙统一，消除视觉错位

内容的提问来源于stack exchange，提问作者DooDoo