CSS 网格行高答案

【问题标题】：CSS Grid Row HeightCSS 网格行高
【发布时间】：2019-02-02 06:55:27
【问题描述】：

我有一个由 API 循环填充的网格。我有 4 行，每行 5 个元素。我已经能够获得正确的列宽，但在调整各个列的高度时遇到了困难。

我希望每行的第 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 行。

有没有办法做到这一点？

【问题讨论】：

请使用相关的 HTML 代码更新您的帖子，以便我们更轻松地为您提供帮助。
完成。基本上是 18 个项目的网格。从每一行的左边算起，第 3 项应该是 2 行高（本列中基本上只有 2 项），然后它们的左右各有 2 - 1 行列。
找到解决办法了吗？
功能选择器将是：.news-item:nth-child(5n+3) (demo)，不幸的是我想不出一种可靠的方法让这些元素具有双倍高度（不使用 display: flex 并设置高度明确，demo)。

标签： css css-grid

【解决方案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>

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

【讨论】：