Aspect-Ratio Tiles
Photo-grid where every tile keeps a perfect 1:1 ratio via `aspect-ratio: 1`. Combined with `auto-fill`, tiles wrap responsively without breaking aspect or causing layout shift on image load.
The code
<div class="gl-ar"> <div class="gl-ar-tile" style="grid-row: span 2"><strong>2:1</strong><em>span 2 rows</em></div> <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div> <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div> <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div> <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div> <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div> <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div> <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div> <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div> <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div> <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div> </div>
<div class="gl-ar">
<div class="gl-ar-tile" style="grid-row: span 2"><strong>2:1</strong><em>span 2 rows</em></div>
<div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
<div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
<div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
<div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
<div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
<div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
<div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
<div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
<div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
<div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
</div>.gl-ar {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 80% at 50% 0%, rgba(192,38,211,0.16), transparent 60%),
#1a0820;
font-family: 'Inter', system-ui, sans-serif;
color: #f5d0fe;
box-sizing: border-box;
align-content: start;
}
.gl-ar-tile {
aspect-ratio: 1;
background: linear-gradient(160deg, rgba(192,38,211,0.18), rgba(126,34,206,0.06));
border: 1px solid rgba(192,38,211,0.32);
border-radius: 12px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
}
.gl-ar-tile[style*="span 2"] { aspect-ratio: 1 / 2; }
.gl-ar-tile strong { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.gl-ar-tile em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px; color: #c026d3;
}
.gl-ar-tile:nth-child(3n+1) { background: linear-gradient(160deg, #c026d3, #a21caf); border: 0; }
.gl-ar-tile:nth-child(3n+1) em { color: rgba(255,255,255,0.7); }
.gl-ar-tile:nth-child(5n+2) { background: linear-gradient(160deg, #a21caf, #86198f); border: 0; }
.gl-ar-tile:nth-child(5n+2) em { color: rgba(255,255,255,0.7); } .gl-ar {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 80% at 50% 0%, rgba(192,38,211,0.16), transparent 60%),
#1a0820;
font-family: 'Inter', system-ui, sans-serif;
color: #f5d0fe;
box-sizing: border-box;
align-content: start;
}
.gl-ar-tile {
aspect-ratio: 1;
background: linear-gradient(160deg, rgba(192,38,211,0.18), rgba(126,34,206,0.06));
border: 1px solid rgba(192,38,211,0.32);
border-radius: 12px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
}
.gl-ar-tile[style*="span 2"] { aspect-ratio: 1 / 2; }
.gl-ar-tile strong { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.gl-ar-tile em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px; color: #c026d3;
}
.gl-ar-tile:nth-child(3n+1) { background: linear-gradient(160deg, #c026d3, #a21caf); border: 0; }
.gl-ar-tile:nth-child(3n+1) em { color: rgba(255,255,255,0.7); }
.gl-ar-tile:nth-child(5n+2) { background: linear-gradient(160deg, #a21caf, #86198f); border: 0; }
.gl-ar-tile:nth-child(5n+2) em { color: rgba(255,255,255,0.7); }