1
HTML/CSSIntermediate#css#grid
HTML/CSSAdvanced#css#grid#responsive
How do you create a responsive grid without media queries using auto-fit/auto-fill?
repeat(auto-fit, minmax(...)) automatically fits as many columns as will fit the container width, collapsing empty tracks, while auto-fill preserves empty tracks. This creates a responsive card grid with zero media queries.
Example
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}