Element not Spanning Two Rows in CSS Grid

Question

I have a CSS grid layout, and I would like to have one of the grid-items span two rows.

Normally I would do this via with the grid-row: span 2 property, or by using named grid areas.

In the example though, despite there being room for .news-item-5 to also span the row below (and effectively take over the space allocated to .news-item-7), I can't get this to work.

Is it not possible in this grid layout to have .news-item-5 span two rows?

As well as the included snippets I have a codepen: https://codepen.io/emilychews/pen/GzpBmO

Any help would be amazing.

/*  ----  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

Based on your CSS code, your grid-template-areas indicate that you need to adjust the grid-template-columns: to read 2fr 2fr 2fr;. You have your style for .news-item-5 commented out, so make that visible and comment out the style for .news-item-7.

Then move down to your HTML and either remove (or comment out) the <article class="news news-item-7"> section that you want .news-item-5 to extend into.

Answer 2

Solution

Add grid-auto-rows: 1fr to your grid container.

/*  ----  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>

---

Explanation

The element (.news-item-5) is actually expanding two rows in your code. Here's the view using Firefox's Grid outline tool:

You can see that the News Item 5 grid item is expanding across two rows. However, its content is confined to the first row.

This is most likely due to an absence of defined row lengths. As a result, grid-template-rows remains at its default setting: none, which means all rows will be implicitly created and sized by grid-auto-rows, who's default value is auto.

From the spec:

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

The none value.

Indicates that no explicit grid tracks are created by this property (though explicit grid tracks could still be created by grid-template-areas).

Note: In the absence of an explicit grid any rows/columns will be implicitly generated, and their size will be determined by the grid-auto-rows and grid-auto-columns properties.

Therefore, as a solution, give the grid some solid guidance by switching from grid-auto-rows: auto to grid-auto-rows: 1fr.