从CSS网格中排除元素
问题描述：
如何使用display:grid因此它只针对.entry或.post元素并排除存档标题和分页？从CSS网格中排除元素
（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>
答
您可以跨度的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>
...但基本上... **你不能**这些元素的布局将受到父级网格属性的影响。您不能按课程选择*排除网格。 –
也许你可以澄清这是*假设*看起来像什么。或者只是将该div完全从网格中取出 - https://jsfiddle.net/nkkmau2x/ –
@Dev是否想让'archive-description'和'pagination'跨越网格列？ – kukkuz