CSS Grid repeat(auto-fill, minmax(240px, 1fr)) Explained: Responsive Cards Without Media Queries
When you build a list of cards, you often want 4 columns on a wide screen, 2 on a narrow one, and 1 on a phone. The usual approach is a stack of media queries, but with CSS Grid it takes just four lines. .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;} To show how this works, I built an example page, captured it at different sizes, and compared ..
2026. 10. 22.