如何用CSS Grid实现<dl>标签的双标题四列布局？

我最近尝试用CSS Grid来实现

标签的特定布局：要求两个

元素各占2列宽度，后续的所有

元素都填充整个4列的区域。目前我写了一段初步的代码，下面是我的思路和优化后的实现方案：

当前实现代码 #

.time-table { 
  display: grid; 
  grid-gap: 1em; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-areas: 
    "destination1 destination1 destination2 destination2" 
    "time time time time"; 
  list-style: none; 
  padding: 0; 
}
.time-table__time { 
  background-color: #34ace0; 
  display: block; 
  color: #fff; 
  margin: 0; 
  grid-area: time; 
}

优化后的语义化实现方案 #

原代码里用了list-style: none，其实不太贴合

的语义属性，我们可以调整成更符合HTML语义的写法，同时让Grid布局更灵活：

示例HTML结构 #

<dl class="time-table">
  <dt class="time-table__title">目的地1</dt>
  <dd>07:30</dd>
  <dd>09:15</dd>
  <dt class="time-table__title">目的地2</dt>
  <dd>08:00</dd>
  <dd class="time-table__highlight">10:00</dd>
</dl>

对应CSS代码 #

.time-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  padding: 0;
}

/* 让每个<dt>占据2列宽度 */
.time-table__title {
  grid-column: span 2;
  font-weight: 700;
  margin: 0;
}

/* 所有<dd>自动填充4列通栏 */
.time-table dd {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.6em;
  background-color: #f5f5f5;
}

/* 特殊<dd>样式保留 */
.time-table__highlight {
  background-color: #34ace0;
  color: #fff;
}

方案优势 #

• 抛弃了依赖固定命名的grid-template-areas，改用grid-column属性直接控制占位，布局更灵活，即使
  数量增加也能自动适配。
• 保留

  的语义化结构，避免误用列表样式，让HTML结构更规范。

• 特殊样式的
  可以通过类名单独设置，不影响整体布局规则。

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