CODEWITHSUNDEEP
htmlcsscss-grid
Ben Grandin
Ben Grandin

Reputation: 176

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

Upvotes: 1

Views: 373

Answers (2)

A Haworth
A Haworth

Reputation: 36492

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>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115046

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>

Upvotes: 2

Related Questions