如何向此网格css中添加更多行和列

Question

我试图修复一个网格模板，但不知何故，我无法修复第5篇文章和图像。当我试图添加第六篇文章时，它被替换了，并出现在左边。我希望它在正确的位置，就像第四个元素。

<figure class="featured-image-6">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/579121/tim-marshall-189232-sm.jpg" alt="Photo by Tim Marshall on Unsplash">
    </figure>
    <div class="number-6">6</div>
    <article class="article article-6">
        <h2>This is 6th Article</h2>
        <p>One of the villagers, Kristina Halvorson from Adaptive Path, holds steadfastly to the notion that design can’t be tested without real content.</p>
    </article>

这个员额不对齐。有人能帮我修一下吗。见链接

Answer 1

在媒体查询中，您应该添加以下代码来定义第六篇文章的列和行。

    .featured-image-6,
    .number-6 {
      grid-column: 3 / 5;
      grid-row: 7 / 8;
    }
    .article-6 {
      grid-column: 3 / 5;
      grid-row: 8 / 9;
    }