Entry 02

Intrinsic grid

Use it for any set of equal cards or tiles. It replaces a column count per breakpoint.

Change the width. The number of columns follows the frame, and at 360 there is one column and no overflow.

Code CSS · 5 lines

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

Why it works, the rules and the credits 2 reasons · 1 rule · support · credits

auto-fit creates as many 16rem columns as the row holds, and 1fr shares what is left. The column count follows the container.
min(100%, 16rem) lets the minimum shrink to the container. Without it a 200px container overflows.

auto-fit stretches a short row to fill the width. Use auto-fill when the item count changes, such as a filtered list, so cards keep their size.

Borrowed from: Kevin Powell, Breakpoint-Free CSS Grid Layouts, 2025-02-19 · Stephanie Eckles, Smol Responsive CSS Grid · Una Kravets, Ten modern layouts in one line of CSS