Question

如何使用display:grid，因此它仅定位.entry或.post元素并排除档案标题和分页？

（archive-description和pagination跨越内容div的整个宽度）

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

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

1 个答案: