從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

您可以跨度的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>