JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="container">
  <div class="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="subgrid-container">
      <div class="sub-item">A</div>
      <div class="sub-item">B</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
      <div class="sub-item">A</div>
      <div class="sub-item">B</div>
  </div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 100px 100px;
  gap: 10px;
  background-color: lightblue;
}

.subgrid-container {
  display: grid;
  grid-template-columns: subgrid; /* Inheriting columns from the parent */
  grid-template-rows: subgrid;    /* Inheriting rows from the parent */
  gap: 10px;
  background-color: lightcoral;
}

.item, .sub-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgreen;
  border: 1px solid black;
}