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

【问题标题】：Span grid items to the full width of the CSS Grid将网格项跨越到 CSS 网格的整个宽度
【发布时间】：2019-02-24 13:08:34
【问题描述】：

如何使用 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/

【问题讨论】：

...但基本上... 你不能 这些元素的布局将受到父级上的 Grid 属性的影响。您不能按类别选择退出网格。
也许您可以澄清一下应该是什么样子的。或者只是将该 div 完全从网格中取出 - jsfiddle.net/nkkmau2x
@Dev 你想让archive-description 和pagination 跨越网格列吗？
@kukkuz 内容 div 的全宽

标签： html css css-selectors css-grid

【解决方案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>

【讨论】：

kukkuz 谢谢，但不适用于带有侧边栏的模板。