将网格项跨越到CSS Grid的整个宽度

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>