Set grid items to be same height

Question

I have quite a specific issue with grid. I was trying to make with all grid items the same size. stretch is not an option in this case, because some of the items span across two rows. When I added align-items: center, that didn't solve the issue. I really didn't find anything to be of help.

#cards {
  padding: 0 7vw;
  margin-top: 3vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  justify-content: center;
}

.card:nth-child(1),
.card:nth-child(3) {
  grid-row: span 2;
}

.card {
  display: block;
  border: solid 5px #000;
  box-shadow: 0 20px 30px -15px hsl(215, 49%, 82%);
  border-radius: 8px;
  margin: 5%;
  overflow: hidden;
  text-align: center;
}

<div id="cards">
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 1</h2>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 2</h2>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 3</h2>
      <p>Hello world</p>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 4</h2>
      <p>I built this two line paragraph oh yes I really want it to be two lines or yes finally.</p>
    </div>
  </div>
</div>

Thank you very much for your ideas. (I am new on Stack Overflow so feel free to give any other suggestions to help me further improve the question)

Hi and Welcome to SO. Code must be included directly into the question as minimal reproduicable code snippet (ctrl + m). If the link to your codepen chanegs or getting deleted or the content changes, the question would hold no further value to the community. — tacoshy, Mar 12 '21 at 14:47
Does this answer your question? [Equal height rows in CSS Grid Layout](https://stackoverflow.com/questions/44488357/equal-height-rows-in-css-grid-layout) — tacoshy, Mar 12 '21 at 14:48
No, don't worry, I made research before I posted the question. — Tom Klima, Mar 12 '21 at 15:30

score 0 · Accepted Answer · answered Mar 13 '21 at 02:21

You can add more rows like this:

grid-template: ".   two   ." 1fr
               "one two  three" 1fr
               "one four three" 1fr
               ".   four  ." 1fr / 
               1fr  1fr  1fr;

With the appropriate grid-area on children.

Here is the snippet (I have also added a height: 90%; on children to make them fit the cells height but keeping the margin):

#cards {
  padding: 0 7vw;
  margin-top: 3vh;
  display: grid;
  grid-template: ".   two  ." 1fr
                 "one two three" 1fr
                 "one four three" 1fr
                 ".   four  ." 1fr / 
                 1fr  1fr  1fr;
  align-items: center;
  justify-content: center;
}

.card:nth-child(1){
  grid-area: one;
}
.card:nth-child(2){
  grid-area: two;
}
.card:nth-child(3){
  grid-area: three;
}
.card:nth-child(4){
  grid-area: four;
}

.card {
  display: block;
  border: solid 5px #000;
  box-shadow: 0 20px 30px -15px hsl(215, 49%, 82%);
  border-radius: 8px;
  margin: 5%;
  overflow: hidden;
  text-align: center;
  height: 90%;
}

<div id="cards">
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 1</h2>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 2</h2>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 3</h2>
      <p>Hello world</p>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 4</h2>
      <p>I built this two line paragraph oh yes I really want it to be two lines or yes finally.</p>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Mar 31 '21 at 10:32

Try this: I had tried many units and when % worked, I just used it

#cards {
  padding: 0 7vw;
  margin-top: 3vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  justify-content: center;
}

.card:nth-child(1),
.card:nth-child(3) {
  grid-row: span 2;
}

.card {
  display: block;
  border: solid 5px #000;
  box-shadow: 0 20px 30px -15px hsl(215, 49%, 82%);
  border-radius: 8px;
  margin: 5%;
  overflow: hidden;
  text-align: center;
  height: 90%;
}

.card:nth-child(1), .card:nth-child(3) {
  height: 45%;
}

<div id="cards">
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 1</h2>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 2</h2>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 3</h2>
      <p>Hello world</p>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 4</h2>
      <p>I built this two line paragraph oh yes I really want it to be two lines or yes finally.</p>
    </div>
  </div>
</div>

Set grid items to be same height

2 Answers2