How to have header in the first colmn

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

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>

Method 2

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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating