如何在第一列中有标题答案

【问题标题】：How to have header in the first colmn如何在第一列中有标题
【发布时间】：2021-11-03 14:46:13
【问题描述】：

我正在尝试使用display: grid;在第一列中显示标题的元素
这里是一个sn-p，加上一个[codepen]

.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;
}

<body>

  <div class="presentation">
    <h1>Hi there</h1>
    <p>I'm trying to display the headers in the 1st column with grid</p>

  </div>

  <div class="box ok">
    <div>Result wanted using flexbox</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 example not working</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>

感谢您的帮助，

PS：我看到了这个post，但它已经有 10 年历史了......

【问题讨论】：

坦率地说，这看起来像一张桌子。
您能否更改 HTML 中元素的顺序和/或必须坚持使用网格？正如@Paulie_D 也指出的那样，它在我看来就像表格数据。
@Paulie_D 是的，我想重新创建一个带有显示网格的表格。 AHaworth 我可以随意使用我想要的任何东西。我只是认为这是一个训练/测试网格的机会
坦率地说。不要。表格对于表格数据是完全可以接受的。事实上，这是正确的用法，并带有语义优势和标准行为。

标签： html css css-grid

【解决方案1】：

因此将标题分配给第一列。

div {
  outline: 1px solid grey;
  padding: 0 0.5em
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1em;
  grid-auto-flow: column;
}

.h1,
.h2 {
  grid-column: 1;
}

<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>

【讨论】：

我的标题需要在第一列：/
已调整。坦率地说，如果不使用类来告诉哪些项目在哪一列中，这是不可持续的/不可扩展的。这就是为什么桌子是首选的原因
codepen.io/Paulie-D/pen/YzxYrBq
谢谢，这正是我想要做的！如果我用桌子，我怎么能把放在左边？
它不会是th，而是每行中的第一个td。我敢肯定以前有人问过类似的问题。

【解决方案2】：

如果您使用 flex 示例中的 HTML 结构，那么您可以使用网格，通过使用 nth-child 选择来告诉项目它们要进入哪一列。

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

.grid .col:nth-child(1) div {
  grid-column: 1 / 2;
}

.grid .col:nth-child(2) div {
  grid-column: 2 / 3;
}

.grid .col:nth-child(3) div {
  grid-column: 3 / 4;
}

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

<div class="box ok">
  <div>Result wanted using grid</div>
  <div class="grid">
    <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>

【讨论】：