User avatar

Jeroen Reumkens PRO

Css Grid Auto-fit With Limits

Unlock Playground Access

Playgrounds let you build, test, and share frontend ideas instantly — right in your browser. Access is included in PRO. Just want Playgrounds? Pick a plan below.

Maker

€5,- / month

Unlimited Playgrounds access to build, experiment, and share without limits.

Join for €5 per month

Champion

€10,- / month

All the benefits of Maker, plus you help Frontend.fyi grow and get a Champion badge on your profile.

Join for €10 per month

Cancel anytime — no commitment.
Upgrade to PRO anytime and get a partial refund.We'll credit 100% of your first 3 months and 50% of the rest toward the PRO lifetime price.

Already a member? Login

Playground settings

Title

Description

Public

Editor settings


Packages

These packages can be imported in your JavaScript files.

Package name

Version

1234567891011121314151617181920212223
.wrapper {
  container: inline-size;
}

.grid {
  --preferred-size: 300px;
  --max-columns: 4;
  --column-size: calc(
    max(
      calc((100cqw / var(--max-columns)) - var(--gap-size) * (var(--max-columns) - 1)), 
      var(--preferred-size))
  );
  --gap-size: 8px;
  
  display: grid;
  gap: var(--gap-size);
  grid-template-columns: repeat(auto-fit, minmax(var(--column-size), 1fr));
  
}

.grid > div {
  background: #ccc;
}
One sec — editor's thinking…