홀리 그레일 레이아웃

<div class="grail" id="grail">
  <header>header</header>
  <nav>nav</nav>
  <main>main</main>
  <aside>aside</aside>
  <footer>footer</footer>
</div>

.grail{width:min(94%,540px);height:min(92%,260px);display:grid;gap:6px;
  grid-template-areas:"h h h" "n m a" "f f f";
  grid-template-rows:16% 1fr 16%;grid-template-columns:22% 1fr 22%}
.grail>*{display:grid;place-items:center;border-radius:8px;background:var(--surface);border:1px solid var(--line);
  color:var(--muted);font-size:clamp(9px,1.6vmin,12px);letter-spacing:.08em;text-transform:uppercase;
  transition:box-shadow .3s,color .3s,border-color .3s}
header{grid-area:h}nav{grid-area:n}main{grid-area:m}aside{grid-area:a}footer{grid-area:f}
.grail>*.active{color:var(--bg);border-color:transparent;background:var(--accent);
  box-shadow:0 6px 18px color-mix(in oklab,var(--accent) 45%,transparent)}

const grail = document.getElementById('grail');
const parts = grail.querySelectorAll('*');
let i = 0;
setInterval(() => {
  parts.forEach((p) => p.classList.remove('active'));
  parts[i % parts.length].classList.add('active');
  i++;
}, 1000);