CSS网格行高

Question

我有一个由API循环填充的网格。 我有5个元素的4行。 我已经能够获得正确的列宽，但是在调整各个列的高度时却遇到了困难。

我希望每行的第3个元素占用2行的高度，而其他所有元素仅占用1行。

到目前为止，这是我对HTML / CSS的了解：

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

所有元素都具有.news-item类。

应该有4行，但是中心元素（应该只有2行）每个应该跨越2行。

有没有办法做到这一点？

Answer 1

是的，看来我自己找到了解决方案。 这是我的解决方法：

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

这似乎是最疯狂的解决方案;）