<div class="parent-grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item subgrid">
      <div class="subitem">A</div>
      <div class="subitem">B</div>
      <div class="subitem">C</div>
  </div>
</div>

<div class="parent-grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">
      <div class="subitem">A</div>
      <div class="subitem">B</div>
      <div class="subitem">C</div>
  </div>
</div>

.parent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    margin-bottom: 12px;
}

.item {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
}

.subgrid {
    display: grid;
    grid-template-columns: subgrid; /* 子グリッドの列を親グリッドに合わせる */
    grid-template-rows: subgrid; /* 子グリッドの行を親グリッドに合わせる */
    background-color: #e0e0e0;
}

.subitem {
    background-color: #b0b0b0;
    padding: 5px;
    text-align: center;
}