如何用CSS Grid在不修改HTML时将dt与dd配对显示在单列

现有如下HTML结构，需将每组<dt>与<dd>放在同一列，实现每行两列的布局，但使用CSS Grid时会将单个<dt>、<dd>视为独立列，且无法修改HTML结构。

原始HTML代码 #

<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
    <dt>Term 3</dt>
    <dd>Definition 3</dd>
    <dt>Term 4</dt>
    <dd>Definition 4</dd>
</dl>

目标布局 #

Term 1: Definition 1        | Term 2: Definition 2
Term 3: Definition 3        | Term 4: Definition 4

错误尝试的CSS #

dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

dt, dd {
    margin: 0;
}

dt:nth-of-type(odd),
dd:nth-of-type(odd) {
    grid-column: 1;
}

dt:nth-of-type(even),
dd:nth-of-type(even) {
    grid-column: 2;
}

dt {
    font-weight: bold;
}

dd {
/*    margin-left: 20px;*/
}

错误原因 #

这段代码仅按奇偶性给单个<dt>、<dd>分配列，但未控制它们的行归属，导致第1个<dd>会和第2个<dt>抢占同一行位置，最终布局混乱，无法形成每组dt+dd在同一列的效果。

正确解决方案 #

通过选择器精准绑定每组dt+dd的列和行，确保每组作为整体占据网格的对应区域：

固定4组的解决方案

dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

dt, dd {
  margin: 0;
}

/* 第1、3组（奇数组）绑定到第1列 */
dt:nth-of-type(2n-1),
dt:nth-of-type(2n-1) + dd {
  grid-column: 1;
}

/* 第2、4组（偶数组）绑定到第2列 */
dt:nth-of-type(2n),
dt:nth-of-type(2n) + dd {
  grid-column: 2;
}

/* 控制每组的行位置：第1/2组在第1行，第3/4组在第2行 */
dt:nth-of-type(1), dt:nth-of-type(1)+dd { grid-row: 1; }
dt:nth-of-type(2), dt:nth-of-type(2)+dd { grid-row: 1; }
dt:nth-of-type(3), dt:nth-of-type(3)+dd { grid-row: 2; }
dt:nth-of-type(4), dt:nth-of-type(4)+dd { grid-row: 2; }

dt {
  font-weight: bold;
}

/* 可选：给dt添加冒号，模拟目标布局的格式 */
dt::after {
  content: ": ";
}

支持任意组数的灵活方案

dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  grid-auto-flow: dense;
}

dt, dd {
  margin: 0;
}

/* 奇数序号的dt（第1、3、5...个）及紧随的dd放在第1列 */
dt:nth-child(4n-3),
dt:nth-child(4n-3) + dd {
  grid-column: 1;
}

/* 偶数序号的dt（第2、4、6...个）及紧随的dd放在第2列 */
dt:nth-child(4n-1),
dt:nth-child(4n-1) + dd {
  grid-column: 2;
}

dt {
  font-weight: bold;
}

dt::after {
  content: ": ";
}

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