How to have header in the first colmn-CodePudding

I'm trying to display header's elements in the first column with display: grid;
Here a snippet, plus a [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>

Thanks you for the help,

PS : I saw this post but it's 10 years old so..

CodePudding user response：

So assign the headings to the first column.

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>

CodePudding user response：

If you use the HTML structure that you have for the flex example then you can use grid, telling items which column they are to go into by selection using 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>