grid-column 子がまたぐ列を決める

<div class="board">
  <span class="wide">2列分</span>
  <span>1</span>
  <span>2</span>
</div>

.board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.board > span {
  background: #efeef8;
  padding: 0.5rem 0.65rem;
}
.wide {
  grid-column: span 2;
}