Span grid items to the full width of the CSS Grid

Question

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>

https://jsfiddle.net/haymanpl/rb0hqb7g/2/

Answer 1

You can span the archive-description and pagination across the columns of the grid by using grid-column: span 3.

See demo below - added borders for illustration (also made the li to div for valid markup):

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