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>

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

CSS网格行高

1 个答案: