{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Diagonal Skew Grid
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-skew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 280px; padding: 14px; font-family: monospace; font-size: 14px; font-weight: 700; color: #fff; } .gl-skew > div { aspect-ratio: 1; background: linear-gradient(135deg, #7c6cff, #a78bfa); border-radius: 4px; display: flex; align-items: center; justify-content: center; transform: rotate(-6deg); transition: transform 0.25s, background 0.25s; } .gl-skew > div:nth-child(even) { background: linear-gradient(135deg, #ff6c8a, #ff9a76); transform: rotate(6deg); } .gl-skew > div:hover { transform: rotate(0deg) scale(1.08); background: linear-gradient(135deg, #2eb88a, #3de8aa); }
<div class="gl-skew"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div> </div>
Live preview
Ready