JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div role="table">
  <div role="row">
    <span role="cell">1</span>
    <span role="cell">2</span>
    <span role="cell">3</span>
  </div>
  <div role="row">
    <span role="cell">4</span>
    <span role="cell" aria-colspan="2">6</span>
  </div>
  <div role="row">
    <span role="cell">7</span>
    <span role="cell">8</span>
    <span role="cell">9</span>
  </div>
  <div role="row">
    <span role="cell">10</span>
    <span role="cell">11</span>
    <span role="cell">12</span>
  </div>
</div>

CSS

[role=table] {
  display: grid;
  grid-template-columns: auto minmax(30px, 1fr) 1fr;
  grid-gap: 2px 8px;
}

[role=row] {
  display: contents;
}

[role=cell] {
  padding: 4px 10px;
}
[role=cell]:nth-child(1) {
  background: #ccc;
}
[role=cell]:nth-child(2) {
  background: #ddd;
}
[role=cell]:nth-child(3) {
  background: #eee;
}

[aria-colspan="2"] {
  grid-column: span 2;
}