如何为不同媒体查询设置CSS Grid项目标题？

可以通过单份标题+CSS伪元素+媒体查询的方式实现，不用重复编写标题单元格，具体方案如下：

HTML结构 #

只需要写一次标题，然后按行组织数据：

<div class="responsive-grid">
  <!-- 仅在大屏幕显示的标题组 -->
  <div class="column-title">title1</div>
  <div class="column-title">title2</div>
  <div class="column-title">title3</div>

  <!-- 第一行数据 -->
  <div class="row-label">1</div>
  <div class="data-value">val11</div>
  <div class="data-value">val12</div>
  <div class="data-value">val13</div>

  <!-- 第二行数据 -->
  <div class="row-label">2</div>
  <div class="data-value">val21</div>
  <div class="data-value">val22</div>
  <div class="data-value">val23</div>
</div>

CSS实现 #

通过媒体查询切换网格布局，窄屏幕下用伪元素复用标题内容：

/* 大屏幕样式（宽度≥768px） */
.responsive-grid {
  display: grid;
  grid-template-columns: 2em repeat(3, 1fr); /* 行标签列 + 3个数据列 */
  gap: 1em;
  margin: 1em;
}

.column-title {
  grid-row: 1; /* 所有标题放在第一行 */
  font-weight: bold;
  text-align: center;
  padding: 0.5em;
}
/* 定位每个标题到对应列 */
.column-title:nth-child(1) { grid-column: 2; }
.column-title:nth-child(2) { grid-column: 3; }
.column-title:nth-child(3) { grid-column: 4; }

.row-label {
  grid-column: 1; /* 行标签固定在第一列 */
  align-self: center;
  font-weight: bold;
  text-align: center;
}
/* 定位行标签到对应行 */
.row-label:nth-child(4) { grid-row: 2; }
.row-label:nth-child(8) { grid-row: 3; }

/* 定位每个数据值到对应单元格 */
.data-value:nth-child(5) { grid-row: 2; grid-column: 2; }
.data-value:nth-child(6) { grid-row: 2; grid-column: 3; }
.data-value:nth-child(7) { grid-row: 2; grid-column: 4; }
.data-value:nth-child(9) { grid-row: 3; grid-column: 2; }
.data-value:nth-child(10) { grid-row: 3; grid-column: 3; }
.data-value:nth-child(11) { grid-row: 3; grid-column: 4; }

/* 窄屏幕样式（宽度<768px） */
@media (max-width: 767px) {
  .responsive-grid {
    grid-template-columns: auto 1fr; /* 标题+值的两列布局 */
    gap: 0.5em;
  }

  /* 隐藏大屏幕的标题组 */
  .column-title {
    display: none;
  }

  /* 行标签跨两列显示 */
  .row-label {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 1em;
    text-align: left;
  }

  /* 用伪元素生成对应标题，复用标题内容 */
  .data-value:nth-child(5)::before, .data-value:nth-child(9)::before {
    content: "title1 ";
    font-weight: bold;
  }
  .data-value:nth-child(6)::before, .data-value:nth-child(10)::before {
    content: "title2 ";
    font-weight: bold;
  }
  .data-value:nth-child(7)::before, .data-value:nth-child(11)::before {
    content: "title3 ";
    font-weight: bold;
  }
}

方案说明 #

• 标题仅在HTML中编写一次，大屏幕下直接显示在顶部；
• 窄屏幕下通过CSS伪元素::before生成对应标题，避免重复编写标题单元格；
• 利用Grid的行列定位属性，在不同屏幕尺寸下重新排布元素位置，实现两种布局的切换。

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