如何使用CSS Grid创建时间表？元素跨多列布局求助

你的当前HTML结构把列标题、行标题和课程内容拆成了三个独立容器，这导致无法利用CSS Grid的跨列/跨行特性。要实现目标时间表，需要将所有元素整合到一个Grid容器中，通过定义网格行列，并为每个元素指定位置和跨度来实现。

修正后的HTML结构 #

<div class="timetable-grid">
  <!-- 顶部时间表头 -->
  <div class="grid-item time-header">时间</div>
  <div class="grid-item time-slot">1</div>
  <div class="grid-item time-slot">2</div>
  <div class="grid-item time-slot">3</div>
  <div class="grid-item time-slot">4</div>
  <div class="grid-item time-slot">5</div>
  <div class="grid-item time-slot">6</div>

  <!-- 左侧日期行 + 课程内容 -->
  <div class="grid-item day">Monday</div>
  <div class="grid-item class-item class-a">A</div> <!-- 跨3列 -->
  
  <div class="grid-item day">Tuesday</div>
  <div class="grid-item class-item class-b">B</div> <!-- 跨2列 -->
  
  <div class="grid-item day">Wednesday</div>
  <div class="grid-item class-item class-c">C</div> <!-- 跨1列 -->
  
  <div class="grid-item day">Thursday</div>
  <div class="grid-item class-item class-e">E</div> <!-- 跨4列 -->
  
  <div class="grid-item day">Friday</div>
  <div class="grid-item class-item class-f">F</div> <!-- 跨2列 -->
</div>

对应的CSS代码 #

.timetable-grid {
  display: grid;
  /* 定义列：1列日期 + 6列时间 */
  grid-template-columns: 120px repeat(6, 1fr);
  /* 定义行：1行时间表头 + 5行日期 */
  grid-template-rows: 60px repeat(5, 100px);
  gap: 2px;
  background-color: #eee;
  padding: 2px;
  max-width: 1000px;
  margin: 0 auto;
}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  padding: 10px;
  border: 1px solid #ddd;
}

/* 表头样式 */
.time-header, .day {
  font-weight: bold;
  background-color: #f5f5f5;
}

/* 课程跨列设置 */
.class-a {
  /* 从第2列开始，跨3列 */
  grid-column: 2 / span 3;
}

.class-b {
  grid-column: 2 / span 2;
}

.class-e {
  grid-column: 2 / span 4;
}

.class-f {
  grid-column: 4 / span 2;
}

关键知识点 #

• grid-column: span N：指定元素跨越N列，也可以用grid-column: 起始列号 / 结束列号（比如grid-column: 2 / 5表示从第2列到第5列，包含3列）。
• 统一Grid容器：所有元素必须在同一个Grid容器内，才能利用Grid的布局特性进行跨列/跨行定位。
• 网格行列定义：通过grid-template-columns和grid-template-rows明确网格的结构，确保表头和内容对齐。

你可以根据实际需求调整行列的宽度、高度，以及课程的跨列数量和位置。

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