24 CSS Grid Layouts 05 / 24
RAM Auto-Fit
The "RAM" pattern — `repeat(auto-fit, minmax(220px, 1fr))` — gives you a grid that wraps as many columns as the container allows, never overflows, and never goes below the minimum.
The code
<div class="gl-ram"> <div class="gl-ram-cell"><strong>Card 1</strong><em>auto-fit · minmax(220px, 1fr)</em></div> <div class="gl-ram-cell"><strong>Card 2</strong><em>auto-fit</em></div> <div class="gl-ram-cell"><strong>Card 3</strong><em>auto-fit</em></div> <div class="gl-ram-cell"><strong>Card 4</strong><em>auto-fit</em></div> <div class="gl-ram-cell"><strong>Card 5</strong><em>auto-fit</em></div> <div class="gl-ram-cell"><strong>Card 6</strong><em>auto-fit</em></div> <div class="gl-ram-cell"><strong>Card 7</strong><em>auto-fit</em></div> <div class="gl-ram-cell"><strong>Card 8</strong><em>auto-fit</em></div> </div>
<div class="gl-ram">
<div class="gl-ram-cell"><strong>Card 1</strong><em>auto-fit · minmax(220px, 1fr)</em></div>
<div class="gl-ram-cell"><strong>Card 2</strong><em>auto-fit</em></div>
<div class="gl-ram-cell"><strong>Card 3</strong><em>auto-fit</em></div>
<div class="gl-ram-cell"><strong>Card 4</strong><em>auto-fit</em></div>
<div class="gl-ram-cell"><strong>Card 5</strong><em>auto-fit</em></div>
<div class="gl-ram-cell"><strong>Card 6</strong><em>auto-fit</em></div>
<div class="gl-ram-cell"><strong>Card 7</strong><em>auto-fit</em></div>
<div class="gl-ram-cell"><strong>Card 8</strong><em>auto-fit</em></div>
</div>.gl-ram {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 80% at 50% 0%, rgba(56,189,248,0.16), transparent 60%),
#051324;
font-family: 'Inter', system-ui, sans-serif;
color: #e0f2fe;
box-sizing: border-box;
align-content: start;
}
.gl-ram-cell {
background: linear-gradient(160deg, rgba(56,189,248,0.16), rgba(14,165,233,0.06));
border: 1px solid rgba(56,189,248,0.28);
border-radius: 12px;
padding: 22px 18px;
display: flex; flex-direction: column;
align-items: flex-start; justify-content: center;
gap: 6px;
min-height: 90px;
}
.gl-ram-cell strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-ram-cell em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px; color: #38bdf8;
letter-spacing: 0.02em;
}
.gl-ram-cell:nth-child(1) { background: linear-gradient(135deg, #0ea5e9, #38bdf8); border: 0; }
.gl-ram-cell:nth-child(1) strong { color: #051324; }
.gl-ram-cell:nth-child(1) em { color: #051324; opacity: 0.7; } .gl-ram {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 80% at 50% 0%, rgba(56,189,248,0.16), transparent 60%),
#051324;
font-family: 'Inter', system-ui, sans-serif;
color: #e0f2fe;
box-sizing: border-box;
align-content: start;
}
.gl-ram-cell {
background: linear-gradient(160deg, rgba(56,189,248,0.16), rgba(14,165,233,0.06));
border: 1px solid rgba(56,189,248,0.28);
border-radius: 12px;
padding: 22px 18px;
display: flex; flex-direction: column;
align-items: flex-start; justify-content: center;
gap: 6px;
min-height: 90px;
}
.gl-ram-cell strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-ram-cell em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px; color: #38bdf8;
letter-spacing: 0.02em;
}
.gl-ram-cell:nth-child(1) { background: linear-gradient(135deg, #0ea5e9, #38bdf8); border: 0; }
.gl-ram-cell:nth-child(1) strong { color: #051324; }
.gl-ram-cell:nth-child(1) em { color: #051324; opacity: 0.7; }