如何构建每行2列、行数动态的CSS Grid布局？

你的核心问题是所有元素被强制挤在同一行轨道中导致重叠，同时对CSS Grid的行定义逻辑存在误解，具体原因和两种修复方案如下：

问题根源 #

1. 所有<svg>和<p>都被设置了grid-row: row-start / row-end，强制它们放入同一个行轨道，必然重叠。
2. grid-template-rows: repeat(auto-fit, ...)用法错误：auto-fit是专门用于响应式列布局的关键字，完全不适合行定义场景。

方案1：不修改HTML，仅调整CSS #

利用Grid的自动排列特性，让元素按顺序填充到每行的两列中，无需手动指定行位置：

.titles {
  display: grid;
  /* 定义固定的两列：第一列图标宽度，第二列自动填充剩余空间 */
  grid-template-columns: 0.8em auto;
  /* 自动生成行，行高由内容决定（可替换为固定值如1.5em） */
  grid-auto-rows: auto;
  /* 可选：列/行之间的间距，提升可读性 */
  column-gap: 0.5em;
  row-gap: 0.5em;
}

.titles svg {
  text-align: center;
  width: 0.8em;
  fill: $off-white;
  height: 0.6em;
  /* 可选：让图标在单元格内垂直居中 */
  align-self: center;
}

.titles p {
  /* 移除p标签默认margin，避免行高过大 */
  margin: 0;
}

Grid会自动按顺序排列元素：第一个<svg>在第1行第1列，第一个<p>在第1行第2列，第二个<svg>在第2行第1列，以此类推，完美实现每行图标+文本的布局。

方案2：调整HTML结构（语义化更优） #

将每组图标和文本包裹为独立容器，让Grid容器的子项为完整的行单元，后期维护更方便：

修改后的HTML #

<div class="titles">
  <div class="title-row">
    <svg name="svg-1"></svg>
    <p class="emphasis-red">text 1</p>
  </div>
  <div class="title-row">
    <svg name="svg-2"></svg>
    <p class="emphasis-red">text 2</p>
  </div>
  <div class="title-row">
    <svg name="svg-3"></svg>
    <p class="emphasis-red">text 3</p>
  </div>
  <div class="title-row">
    <svg name="svg-4"></svg>
    <p class="emphasis-red parent-text">text 4</p>
  </div>
</div>

配套CSS #

.titles {
  display: grid;
  /* 每行仅一个完整行单元 */
  grid-template-columns: 100%;
  /* 可选：行间距 */
  row-gap: 0.5em;
}

.title-row {
  display: grid;
  grid-template-columns: 0.8em auto;
  column-gap: 0.5em;
  /* 让图标和文本垂直居中对齐 */
  align-items: center;
}

.title-row svg {
  text-align: center;
  width: 0.8em;
  fill: $off-white;
  height: 0.6em;
}

.title-row p {
  margin: 0;
}

这种结构的优势在于：整行的样式调整（如 hover 效果、背景色）可以直接作用于.title-row，语义更清晰。

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