CSS Grid Patterns

Animated CSS grid with staggered color transitions.

snippet

<div class="grid-wrap"></div>

.grid-wrap { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; width: 320px; margin: 0 auto; } .grid-wrap div { aspect-ratio: 1; border-radius: 4px; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { background: rgba(68,102,255,0.15); } 50% { background: rgba(123,97,255,0.4); } }

var wrap = document.querySelector(".grid-wrap"); for (var i = 0; i < 64; i++) { var d = document.createElement("div"); d.style.animationDelay = (i * 0.05) + "s"; wrap.appendChild(d); }