元素不在CSS网格中跨越两行

Question

我有一个CSS网格布局，我希望其中一个网格项目跨越两行。

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

尽管在示例中，尽管.news-item-5仍有空间跨越下面的行（并有效地占用了分配给.news-item-7的空间），但我无法做到这一点。 / p>

在此网格布局中，.news-item-5跨越两行是不可能的吗？

除了附带的代码段外，我还有一个代码笔：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>

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's Grid outline tool的视图：

您可以看到“新闻项目5”网格项目在两行中展开。但是，其内容仅限于第一行。

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

根据规范：

  

§ 7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties

     

none 值。

     

表明此属性未创建任何显式网格轨道（尽管显式网格轨道仍可以由grid-template-areas创建）。

     

    

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

  

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

Answer 2

根据您的CSS代码，您的grid-template-areas表示您需要调整grid-template-columns:才能读取2fr 2fr 2fr;。您已注释掉.news-item-5的样式，因此要使其可见并注释掉.news-item-7的样式。

然后移至HTML，然后删除（或注释掉）您想将<article class="news news-item-7">扩展到的.news-item-5部分。