<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item">
    <p>Left offset <span>↔️</span></p>
  </div>
  <div class="grid-item"></div>
  <div class="grid-item">
    <p>Right offset <span>↔️</span></p>
  </div>
  <div class="grid-item">
    <p>Top offset <span>↕️</span></p>
  </div>
  <div class="grid-item">1</div>
  <div class="grid-item">5</div>
  <div class="grid-item">2</div>
  <div class="grid-item"></div>
  <div class="grid-item">8</div>
  <div class="grid-item">
    <p>9 <span>Set with the <code>fill</code> keyword</span></p>
  </div>
  <div class="grid-item">6</div>
  <div class="grid-item">
    <p>Bottom offset <span>↕️</span></p>
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">7</div>
  <div class="grid-item">3</div>
</div>

body {
  display: grid;
  place-items: center;
  height: 100dvh;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  max-width: 800px;
}

.grid-item {
  display: grid;
  padding: 0.5rem;
  place-items: center;
  text-align: center;
}
.grid-item:not(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(9), :nth-child(13)) {
  border: 1px solid #1b1b1b;
}
.grid-item:nth-child(2) {
  border-inline: 1px dashed #1b1b1b;
}
.grid-item:nth-child(4) {
  border-inline-start: 1px dashed #1b1b1b;
}
.grid-item:nth-child(5),
.grid-item:nth-child(13) {
  border-block: 1px dashed #1b1b1b;
}
.grid-item:nth-child(7),
.grid-item:nth-child(11),
.grid-item:nth-child(15) {
  border-inline: 3px dashed red;
}
.grid-item:nth-child(10),
.grid-item:nth-child(11),
.grid-item:nth-child(12) {
  border-block: 3px dashed red;
}
.grid-item:nth-child(6),
.grid-item:nth-child(8),
.grid-item:nth-child(14),
.grid-item:nth-child(16) {
  background-color: #fff2df;
}
.grid-item:nth-child(7),
.grid-item:nth-child(10),
.grid-item:nth-child(12),
.grid-item:nth-child(15) {
  background-color: #eaeaea;
}

.grid-item span {
  display: block;
  font-size: 80%;
  margin-block-start: 0.5rem;
}