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)

Answer 1

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>

Answer 2

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>