将网格项目跨越到 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

您可以使用 grid-column: span 3.

跨越 archive-description 和 pagination 跨越网格的列

请参阅下面的演示 - 添加边框以供说明（还使 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>

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

Span grid items to the full width of the CSS Grid

html

css

css-selectors

css-grid