html - 将网格元素跨越到 CSS 网格的整个宽度

Question

如何使用 display:grid 使其仅针对 .entry 或 .post 元素并排除存档标题和分页？

(archive-description 和 pagination 跨越内容 div 的整个宽度)

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

<main class="content">

  <div class="archive-description">Archive Title</div>

  <article class="post entry">This is a post</article>

  <article class="post entry">This is a post</article>

  <article class="post entry">This is a post</article>

  <li class="pagination">Previous & Next Entry</li>

</main>

https://jsfiddle.net/haymanpl/rb0hqb7g/2/

Answer 1

您可以跨越 archive-description 和 pagination 使用 grid-column: span 3 。

请参阅下面的演示 - 添加边框以供说明(还将 li 设为 div 以获得有效标记):

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  position: relative;
  border: 1px solid green;
}
.archive-description, .pagination {
  grid-column: span 3;
  text-align: center;
}
main > * {
  border: 1px solid;
}

<main class="content">
  <div class="archive-description">Archive Title</div>
  <article class="post entry">This is a post</article>
  <article class="post entry">This is a post</article>
  <article class="post entry">This is a post</article>
  <div class="pagination">Previous & Next Entry</div>
</main>