html - CSS网格中的元素不跨越两行

Question

我有一个 CSS 网格布局，我想让其中一个网格项跨越两行。

通常我会通过grid-row: span 2属性或使用命名网格区域来做到这一点。

尽管在示例中，尽管有空间.news-item-5也可以跨越下面的行（并有效地接管分配给 的空间.news-item-7），但我无法让它工作。

在这个网格布局中不可能有.news-item-5两行吗？

除了包含的片段外，我还有一个 codepen：https ://codepen.io/emilychews/pen/GzpBmO

任何帮助都会很棒。

/*  ----  GRID */
.second-grid-wrapper {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 2fr 2fr 1fr;
    grid-template-areas: 

    "news-1  news-2  news-3"
    "news-1  news-4  news-5"
    "news-6  news-4  news-5";
}

.news-item-1 {grid-area: news-1}
.news-item-4 {grid-area: news-4}
/* .news-item-5 {grid-area: news-5} */

.news-item-7 {
    background: #fff;
}

.news{
    background: lightblue;
    box-sizing: border-box
}

<section class="second-grid-wrapper">
  <article class="news news-item-1">
    <div class="top-news-item-text-wrapper">
      <h2 class="news-item-heading td">This is a headline - 1</h2>
      <p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </article>
  <article class="news news-item-2">
    <div class="top-news-item-text-wrapper">
      <h3 class="news-item-heading td">A SMALLER HEADLINE - 2</h3>
      <a target="_blank" class="bottom-text td">Link</a>
    </div>
  </article>
  <article class="news news-item-3">
    <div class="top-news-item-text-wrapper">
      <h2 class="news-item-heading td">This is a headline -3</h2>
      <p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </article>
  <article class="news news-item-4">
    <div class="top-news-item-text-wrapper">
      <h2 class="news-item-heading td">This is a headline - 4</h2>
      <p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </article>
  <article class="news news-item-5">
    <div class="top-news-item-text-wrapper">
      <h2 class="news-item-heading td">This is a headline - 5</h2>
      <p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </article>
  <article class="news news-item-6">
    <div class="top-news-item-text-wrapper">
      <h2 class="news-item-heading td">SOMETHING ELSE - 6</h2>
      <p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </article>
  <article class="news news-item-7">
    <div class="top-news-item-text-wrapper">
      <h2 class="news-item-heading td">This is a headline - 7</h2>
      <p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </article>
</section>

标签： htmlcsscss-grid

Answer 1

解决方案

添加grid-auto-rows: 1fr到您的网格容器。

/*  ----  GRID */
.second-grid-wrapper {
    display: grid;
    grid-auto-rows: 1fr; /* new */  
    grid-template-columns: 2fr 2fr 1fr;
    grid-gap: 1rem;
    grid-template-areas: 
    "news-1  news-2  news-3"
    "news-1  news-4  news-5"
    "news-6  news-4  news-5";
}

.news-item-1 {grid-area: news-1}
.news-item-4 {grid-area: news-4}
.news-item-5 {grid-area: news-5}
.news-item-7 {background: #fff;}
.news{
    background: lightblue;
    box-sizing: border-box
}

<section class="second-grid-wrapper">
  <article class="news news-item-1">
    <div class="top-news-item-text-wrapper">
      <h2 class="news-item-heading td">This is a headline - 1</h2>
      <p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </article>
  <article class="news news-item-2">
    <div class="top-news-item-text-wrapper">
      <h3 class="news-item-heading td">A SMALLER HEADLINE - 2</h3>
      <a target="_blank" class="bottom-text td">Link</a>
    </div>
  </article>
  <article class="news news-item-3">
    <div class="top-news-item-text-wrapper">
      <h2 class="news-item-heading td">This is a headline -3</h2>
      <p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </article>
  <article class="news news-item-4">
    <div class="top-news-item-text-wrapper">
      <h2 class="news-item-heading td">This is a headline - 4</h2>
      <p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </article>
  <article class="news news-item-5">
    <div class="top-news-item-text-wrapper">
      <h2 class="news-item-heading td">This is a headline - 5</h2>
      <p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </article>
  <article class="news news-item-6">
    <div class="top-news-item-text-wrapper">
      <h2 class="news-item-heading td">SOMETHING ELSE - 6</h2>
      <p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </article>
  <article class="news news-item-7">
    <div class="top-news-item-text-wrapper">
      <h2 class="news-item-heading td">This is a headline - 7</h2>
      <p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </article>
</section>

---

解释

元素 ( .news-item-5) 实际上扩展了代码中的两行。这是使用Firefox 的 Grid 大纲工具的视图：

您可以看到 News Item 5 网格项扩展为两行。但是，它的内容仅限于第一行。

这很可能是由于缺少定义的行长度。结果，grid-template-rows保持其默认设置：none，这意味着所有行将由 隐式创建和调整大小grid-auto-rows，其默认值为auto。

从规范：

§ 7.2。显式轨道大小：grid-template-rowsand grid-template-columns属性

none价值。

指示此属性未创建显式网格轨迹（尽管仍可以创建显式网格轨迹grid-template-areas）。

注意：在没有显式网格的情况下，任何行/列都将被隐式生成，它们的大小将由grid-auto-rows和grid-auto-columns属性确定。

grid-auto-rows: auto因此，作为一种解决方案，通过从 切换到来给网格一些可靠的指导grid-auto-rows: 1fr。