我有一个由循环中的API填充的网格。我有4行5个元素。我已经能够获得正确的列宽度,但正在努力调整各个列的高度。
我希望每行的第三个元素在高度上占用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行。
有没有办法做到这一点?
发布于 2018-08-28 02:34:54
是的,似乎我自己找到了解决方案。以下是我的解决方案:
.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>
这似乎是最不疯狂的解决方案;)
https://stackoverflow.com/questions/52044337
复制相似问题