12분할 그리드

<div class="stage">
  <div class="cols show" id="cols"></div>
  <div class="content" id="content"></div>
</div>

.stage{position:relative;width:min(92%,560px);height:min(90%,240px)}
.cols{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);gap:2%;opacity:.3;
  transition:opacity .4s;pointer-events:none}
.cols.show{opacity:1}
.cols i{background:color-mix(in oklab,var(--accent) 20%,transparent);border-left:1px dashed color-mix(in oklab,var(--accent) 55%,transparent);
  border-right:1px dashed color-mix(in oklab,var(--accent) 55%,transparent)}
.content{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);gap:2%}
.content b{border-radius:8px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);font-size:clamp(9px,1.6vmin,12px);transition:background .3s,color .3s}
.content b.active{background:var(--accent-2);color:#fff;border-color:transparent}

const cols = document.getElementById('cols');
for (let i = 0; i < 12; i++) cols.appendChild(document.createElement('i'));
const content = document.getElementById('content');
const spans = [
  [12],
  [6, 6],
  [4, 4, 4],
  [3, 3, 3, 3],
];
function render(spanSet, activeIdx) {
  content.innerHTML = '';
  spanSet.forEach((s, idx) => {
    const b = document.createElement('b');
    b.style.gridColumn = 'span ' + s;
    b.textContent = 'span ' + s;
    if (idx === activeIdx) b.classList.add('active');
    content.appendChild(b);
  });
}
let si = 0;
render(spans[0], 0);
setInterval(() => {
  cols.classList.toggle('show');
  si = (si + 1) % spans.length;
  render(spans[si], Math.floor(Math.random() * spans[si].length));
}, 1500);