How to have header in the first colmn

Question

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

Are you able to change the order of elements in the HTML and/or must you stick with using a grid? As @Paulie_D has also pointed out it looks like tabular data to me. — A Haworth, Nov 03 '21 at 15:27
@Paulie_D yes, i want to recreate a table with display grid. AHaworth I'm free to use whatever I want. I just think that is a chance to train/test grid — Ben Grandin, Nov 03 '21 at 15:34
Frankly. **don't**. A table is perfectly acceptable for tabular data and. in fact, is the correct usage and comes with semantic benefits and standard behaviours. — Paulie_D, Nov 03 '21 at 15:36

Paulie_D · Accepted Answer · 2021-11-03T15:40:11.053

2

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>

edited Nov 03 '21 at 15:40

answered Nov 03 '21 at 15:29

Paulie_D

107,962
13
142
161

My headers need to be on the first column :/ – Ben Grandin Nov 03 '21 at 15:36
1

Adjusted. Frankly this is not sustainable/scaleable without using classes to tell which items to be in which column. Which is why a table is the preferred option – Paulie_D Nov 03 '21 at 15:42
2

https://codepen.io/Paulie-D/pen/YzxYrBq – Paulie_D Nov 03 '21 at 15:44
Thanks, this exactly what i was trying to do ! If I go with table, how could I put the in the left ? – Ben Grandin Nov 03 '21 at 15:51
It wouldn't be a `th` it would be the first `td` in each row. I'm sure a similar question has been asked before. – Paulie_D Nov 03 '21 at 15:52
Yes, found it, [here](https://stackoverflow.com/questions/6368061/most-common-way-of-writing-a-html-table-with-vertical-headers) ! Thanks you a lot for all those answers. – Ben Grandin Nov 03 '21 at 15:55

score 0 · Answer 2 · answered Nov 03 '21 at 16:00

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>

How to have header in the first colmn

2 Answers2