<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
:root {
  --yellow: #ffc600;
}

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 100px 200px;
  grid-template-rows: 200px 400px;
  grid-auto-rows: 100px 400px 60px;
}

.item {
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow);
}

.item p {
  margin: 0 0 5px 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.