CSS Grid Row Height

Question

I have a grid that is being populated by an API in a loop. I have 4 rows of 5 elements. I have been able to get the column widths correct but am struggling with adjusting individual column heights.

I would like the 3rd element of each row to take up 2 rows in height and all others to take up only one.

Here is what I have for HTML/CSS so far:

 .feedContain { display: grid; grid-template-columns: repeat(2, minmax(auto, 1fr)) minmax(auto, 2fr) repeat(2, minmax(auto, 1fr)); grid-template-rows: auto; grid-column-gap: 20px; grid-row-gap: 20px; } .feedContain .news-item { min-height: 100px; background-color: #cccccc; } 

 <div class="feedContain"> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> </div> 

All elements have the class of .news-item.

There should be 4 rows but the center elements (there should only be 2) should span 2 rows each.

Is there a way to do this?

Answer 1

Yes it seems I found the solution on my own. Here was my fix:

 .feedContain{ display: grid; grid-template-columns: repeat(2, minmax(auto, 1fr)) minmax(auto, 2fr) repeat(2, minmax(auto, 1fr)); grid-template-rows: auto; grid-column-gap: 20px; grid-row-gap: 20px; } .feedContain .news-item{ min-height: 100px; background-color: #cccccc; } .socialB .feedContain .news-item:nth-child(3), .socialB .feedContain .news-item:nth-child(8) { grid-column: 3/4; } .socialB .feedContain .news-item:nth-child(3) { grid-row: 1/3; } .feedContain .news-item:nth-child(8) { grid-row: 3/5; } 

 <div class="feedContain"> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> <div class="news-item"></div> </div> 

This seems to be the least insane solution ;)