JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="parent-grid">
  <div class="child-with-before"></div>
</div>

CSS

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

.child-with-before {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  position: relative;
}

.child-with-before::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0.2); /* For visibility */
}