问CSS网格行高
EN

Stack Overflow用户

提问于 2018-08-28 01:33:33

回答 1查看 275关注 0票数 0

我有一个由循环中的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行。

有没有办法做到这一点？

css

css-grid

回答 1

Stack Overflow用户

发布于 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>

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52044337

复制

相似问题

问CSS网格行高
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格行高EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格行高
EN