JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-container">

  <div class="grid-item">1 </div>
  <!-- occupies all space in explicit grid (3 cells) -->

  <div class="grid-item">2 </div>
  <!-- forced to created an implicit column (100px wide) -->

  <div class="grid-item">3 </div>
  <!-- forced to created an implicit column (75px wide) -->

</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-auto-columns: 100px 75px;
  grid-auto-rows: 25px;
}


.grid-item {
  grid-row: 1;
  border: 1px solid black;
}

.grid-item:nth-child(1) {
  grid-column: 1 / -1;
}