如何使用CSS Grid实现表头元素在网格第一列展示

问题描述 #

我正尝试使用display: grid;将表头元素展示在第一列，以下是我的代码片段：

CSS代码 #

.grid-container {
  margin: 1rem;
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  align-items: baseline;
}

.h1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.h2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.flex {
  display: flex;
}

.col {
  flex-direction: column;
  margin: 1rem;
}

body {
  background-color: aliceblue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
}

p {
  margin: 0;
}

.presentation {
  margin-bottom: 3rem;
}

.box {
  margin: 1rem 2rem;
  padding: 1rem;
  background-color: #000;
  color: white;
  width: 80%;
}

.ok {
  background: green;
}

.not-ok {
  background: darkred;
}

HTML代码 #

<body>
  <div class="presentation">
    <h1>Hi there</h1>
    <p>我尝试用grid实现表头放在第一列的效果</p>
  </div>

  <div class="box ok">
    <div>用flex实现的预期效果</div>
    <div class="flex">
      <div class="col">
        <div>header 1</div>
        <div>header 2</div>
      </div>
      <div class="col">
        <div>b0</div>
        <div>b1</div>
      </div>
      <div class="col">
        <div>c0</div>
        <div>c1</div>
      </div>
    </div>
  </div>

  <div class="box not-ok">
    <div>未生效的grid示例</div>
    <div class="grid-container">
      <div class="h1">header 1</div>
      <div class="h2">header 2</div>
      <div>b0</div>
      <div>b1</div>
      <div>c0</div>
      <div>c1</div>
    </div>
  </div>
</body>

我之前查过相关的技术帖子，但发布时间已经有10年，参考价值有限，希望得到帮助。

解决方案 #

代码的核心问题是.h1的grid-row配置错误：grid-row: 1 / 3代表该元素会横跨第一到第三条网格线之间的区域，也就是独占第一列的两行高度，直接把原本要放在第一列第二行的.h2挤到了后续列，导致布局错乱。

只需要调整.h1的grid-row属性，让它仅占用第一行即可，修改后的对应CSS代码如下：

.h1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2; /* 仅占用第一行高度 */
}

.h2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3; /* 占用第二行高度 */
}

修改后两个表头会在第一列上下排列，其余内容会自动填充到对应行的后续列，完全符合你用flex实现的预期效果。

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