Exclusion d'éléments de la grille CSS

Question

Comment utiliser display:grid pour cibler uniquement les éléments .entry ou .post et exclure le titre et la pagination de l'archive?

(archive-description et la pagination pour couvrir la largeur de la div contenu)

.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

Vous pouvez durée le archive-description et pagination à travers les colonnes la grille en utilisant grid-column: span 3.

Voir la démo ci-dessous - frontières ajoutée pour illustration (également fait le li-div pour le balisage valide):

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