首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS网格行高

CSS网格行高
EN

Stack Overflow用户
提问于 2018-08-28 01:33:33
回答 1查看 275关注 0票数 0

我有一个由循环中的API填充的网格。我有4行5个元素。我已经能够获得正确的列宽度,但正在努力调整各个列的高度。

我希望每行的第三个元素在高度上占用2行,而所有其他元素只占用1行。

到目前为止,我对HTML/CSS的了解如下:

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<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行。

有没有办法做到这一点?

EN

回答 1

Stack Overflow用户

发布于 2018-08-28 02:34:54

是的,似乎我自己找到了解决方案。以下是我的解决方案:

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52044337

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档