How do I use display:grid
so it only targets .entry
or .post
elements and excludes the archive title and pagination?
(archive-description
and the pagination
to span the full width of the content 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>
You can span the
archive-description
andpagination
across the columns of the grid by usinggrid-column: span 3
.See demo below - added borders for illustration (also made the
li
todiv
for valid markup):