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> 

這似乎是最瘋狂的解決方案;）