<section class="container">
  <article class="item">1</article>
  <article class="item">2</article>
  <article class="item">3</article>
  <article class="item">4</article>
  <article class="item">5</article>
  <article class="item">6</article>
  <article class="item">7</article>
  <article class="item">8</article>
  <article class="item">9</article>
  <article class="item">10</article>
  <article class="item">11</article>
  <article class="item">12</article>
</section>
.container {
  margin: auto;
  width: 100%;
  height: 80vh;
  font-size: 2rem;
  font-family: sans-serif;
  text-align: center;
  border: medium solid #333;
  background-color: #EEE;
  display: grid;
  grid-template-columns: 100px 6rem 1fr 20vw;
  grid-template-rows: repeat(3, auto);
  grid-gap: 1rem 2rem;
}

.item {
  background-color: steelblue;
  color: #FFF;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.