{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Aspect-Ratio Tiles
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-ar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 320px; font-family: monospace; font-size: 11px; color: #fff; } .gl-ar-t { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #7c6cff, #a78bfa); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .gl-ar-t:nth-child(2) { background: linear-gradient(135deg, #ff6c8a, #ff9a76); } .gl-ar-t:nth-child(3) { background: linear-gradient(135deg, #2eb88a, #3de8aa); } .gl-ar-t:nth-child(4) { background: linear-gradient(135deg, #f5a84a, #ffd479); } .gl-ar-t:nth-child(5) { background: linear-gradient(135deg, #3de8f5, #5aa0e0); } .gl-ar-t:nth-child(6) { background: linear-gradient(135deg, #a78bfa, #cbb8ff); }
<div class="gl-ar"> <div class="gl-ar-t">16:9</div> <div class="gl-ar-t">16:9</div> <div class="gl-ar-t">16:9</div> <div class="gl-ar-t">16:9</div> <div class="gl-ar-t">16:9</div> <div class="gl-ar-t">16:9</div> </div>
Live preview
Ready