Responsive grid with no media queries

A card grid that automatically fits as many columns as will comfortably fit, using auto-fit and minmax.

grid
responsive
auto-fit
minmax

Min column width120px

Gap12px

HTML

<div class="auto-grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

CSS

:root {
    --min: 120px;
    --gap: 12px;
}

.auto-grid {
    display: grid;
    gap: var(--gap);
    /* As many columns as fit, each at least --min wide, sharing space. */
    grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
}

.auto-grid > * {
    display: grid;
    place-items: center;
    min-height: 72px;
    border-radius: 10px;
    background: #2a2d3a;
    color: #e8eaed;
    font-weight: 600;
}

How it works

repeat(auto-fit, minmax(var(--min), 1fr)) is the whole trick — the grid creates as many columns as fit at a minimum of --min, then 1fr stretches them to fill the row. Shrink the min width or the preview and columns reflow automatically. No media queries required.

Use auto-fit to stretch items to fill the row (empty tracks collapse).
Use auto-fill instead to keep reserving empty columns at wide widths.