<!-- divs should be list items -->
<section class="container">
  <header>Header</header>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <footer>Footer</footer>
</section>
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.625rem;
}
.container > * {
    padding: 1.875rem;
    font-size: 1.875rem;
    font-weight: 800;
    text-align: center;
    background: #dfeffd;
    border: 3px solid #457fdc;
    color: #457fdc;
}
header,
footer {
    grid-column: 1 / span 3;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.