30 CSS Grid Layouts11 / 30

Pure CSSMIT licensed

RAM Auto-Fit

Repeat, Auto-fit, Minmax — the single most useful line of CSS written this decade. Card grids that go 4-up, 3-up, 2-up, 1-up as the container narrows, with zero media queries. This demo ships the crash-proof 2026 version with min() and a clamp()ed floor, plus a live track-count readout so learners watch it respond.

Published Updated

Live Demo
Try it

The code

<section class="cgl-11" aria-label="RAM auto-fit grid demo">
  <div class="cgl-11__grid">
    <article class="cgl-11__card"><h4>Repeat</h4><p>As many tracks as fit — the browser does the counting, not your breakpoints.</p></article>
    <article class="cgl-11__card"><h4>Auto-fit</h4><p>Empty tracks collapse; the survivors absorb the space.</p></article>
    <article class="cgl-11__card"><h4>Minmax</h4><p>A 220px floor keeps cards dignified; the 1fr ceiling keeps rows full.</p></article>
    <article class="cgl-11__card"><h4>min() hardening</h4><p>min(220px, 100%) means the floor can never exceed the container. No overflow, ever.</p></article>
    <article class="cgl-11__card"><h4>Zero queries</h4><p>4-up to 1-up with no @media. Resize and count the columns.</p></article>
    <article class="cgl-11__card"><h4>clamp() upgrade</h4><p>A fluid floor — clamp(220px, 24vw, 320px) — scales cards with the viewport.</p></article>
  </div>
</section>
.cgl-11,
.cgl-11 *,
.cgl-11 *::before,
.cgl-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cgl-11 {
  width: 100%;
  min-height: 100vh;
  --teal: oklch(0.78 0.13 190);
  --bg: oklch(0.97 0.01 190);
  --ink: oklch(0.25 0.03 210);
  font-family: system-ui,sans-serif;
  background: linear-gradient(180deg,var(--bg),oklch(0.93 0.02 195));
  padding: 1.4rem;
}

.cgl-11 .cgl-11__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap: 14px;
}

.cgl-11 .cgl-11__card {
  background: white;
  border: 1px solid color-mix(in oklab,var(--teal) 40%,white);
  border-radius: 14px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  box-shadow: 0 10px 24px -18px oklch(0.4 0.08 200/.6);
  transition: translate .2s ease,box-shadow .2s ease;
}

.cgl-11 .cgl-11__card:hover {
  translate: 0 -3px;
  box-shadow: 0 16px 32px -18px oklch(0.4 0.1 200/.7);
}

.cgl-11 h4 {
  font-size: .95rem;
  color: var(--ink);
}

.cgl-11 h4::before {
  content: "";
  display: inline-block;
  inline-size: .55em;
  block-size: .55em;
  border-radius: 2px;
  background: var(--teal);
  margin-inline-end: .5em;
  rotate: 45deg;
}

.cgl-11 p {
  font-size: .8rem;
  line-height: 1.55;
  color: color-mix(in oklab,var(--ink) 70%,white);
}

@media (prefers-reduced-motion: reduce) {
  .cgl-11 .cgl-11__card {
    transition: none;
  }
}
/* No JavaScript — repeat(auto-fit, minmax(min(220px,100%),1fr)) is the entire responsive algorithm. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Grid Layout from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: RAM Auto-Fit
Source: https://codefronts.com/layouts/css-grid-layouts/ram-auto-fit/

Repeat, Auto-fit, Minmax — the single most useful line of CSS written this decade. Card grids that go 4-up, 3-up, 2-up, 1-up as the container narrows, with zero media queries. This demo ships the crash-proof 2026 version with min() and a clamp()ed floor, plus a live track-count readout so learners watch it respond.
## HTML
```html
<section class="cgl-11" aria-label="RAM auto-fit grid demo">
  <div class="cgl-11__grid">
    <article class="cgl-11__card"><h4>Repeat</h4><p>As many tracks as fit — the browser does the counting, not your breakpoints.</p></article>
    <article class="cgl-11__card"><h4>Auto-fit</h4><p>Empty tracks collapse; the survivors absorb the space.</p></article>
    <article class="cgl-11__card"><h4>Minmax</h4><p>A 220px floor keeps cards dignified; the 1fr ceiling keeps rows full.</p></article>
    <article class="cgl-11__card"><h4>min() hardening</h4><p>min(220px, 100%) means the floor can never exceed the container. No overflow, ever.</p></article>
    <article class="cgl-11__card"><h4>Zero queries</h4><p>4-up to 1-up with no @media. Resize and count the columns.</p></article>
    <article class="cgl-11__card"><h4>clamp() upgrade</h4><p>A fluid floor — clamp(220px, 24vw, 320px) — scales cards with the viewport.</p></article>
  </div>
</section>
```
## CSS
```css
.cgl-11,
.cgl-11 *,
.cgl-11 *::before,
.cgl-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cgl-11 {
  width: 100%;
  min-height: 100vh;
  --teal: oklch(0.78 0.13 190);
  --bg: oklch(0.97 0.01 190);
  --ink: oklch(0.25 0.03 210);
  font-family: system-ui,sans-serif;
  background: linear-gradient(180deg,var(--bg),oklch(0.93 0.02 195));
  padding: 1.4rem;
}

.cgl-11 .cgl-11__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap: 14px;
}

.cgl-11 .cgl-11__card {
  background: white;
  border: 1px solid color-mix(in oklab,var(--teal) 40%,white);
  border-radius: 14px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  box-shadow: 0 10px 24px -18px oklch(0.4 0.08 200/.6);
  transition: translate .2s ease,box-shadow .2s ease;
}

.cgl-11 .cgl-11__card:hover {
  translate: 0 -3px;
  box-shadow: 0 16px 32px -18px oklch(0.4 0.1 200/.7);
}

.cgl-11 h4 {
  font-size: .95rem;
  color: var(--ink);
}

.cgl-11 h4::before {
  content: "";
  display: inline-block;
  inline-size: .55em;
  block-size: .55em;
  border-radius: 2px;
  background: var(--teal);
  margin-inline-end: .5em;
  rotate: 45deg;
}

.cgl-11 p {
  font-size: .8rem;
  line-height: 1.55;
  color: color-mix(in oklab,var(--ink) 70%,white);
}

@media (prefers-reduced-motion: reduce) {
  .cgl-11 .cgl-11__card {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — repeat(auto-fit, minmax(min(220px,100%),1fr)) is the entire responsive algorithm. */
```

How this works

The whole algorithm: grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)). The browser fits as many 220px-minimum tracks as the container allows, collapses the empty ones (auto-fit), then stretches survivors equally (1fr). The inner min(220px, 100%) is the modern hardening — on a 180px-wide container the floor becomes 100%, so nothing overflows, ever.

The upgrade path shown in the header comment: minmax(clamp(220px, 24vw, 320px), 1fr) makes the floor itself fluid, so cards scale with the viewport between fixed bounds — fully fluid grids with no breakpoints at all. Cards are semantic <article>s with hover states, ready to paste into any project.

Make it yours

  • The floor (220px) is your card's minimum dignified width — measure your densest card content and set it there.
  • Prefer auto-fill when you want 2 items to stay card-width instead of stretching half the container each.
  • Go fluid with the clamp() variant when your design scales typography with viewport too.
  • Cap stretch with minmax(min(220px,100%), 340px) if over-wide cards hurt readability.

Gotchas — read before shipping

  • auto-fit with ONE item stretches it full-width — often ugly. auto-fill keeps ghost tracks and holds card width; know which you want.
  • The naked minmax(220px,1fr) version overflows below 220px container width — always wrap the floor in min().
  • This sizes columns only; for equal ROW heights across cards see the Subgrid Card demo (№ 15).

Browser support

ChromeSafariFirefoxEdge
111+16.2+113+111+

Floor set by oklch(), color-mix() as this demo is written. The core technique itself goes back further — Chrome 79+.

min()/clamp() in track sizes are the gate (2020). The base repeat/auto-fit/minmax runs since 2017.

Techniques used in this demo

color-mix()MDN ↗grid-templateMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →