What CSS property or layout method fixes Cards should automatically reduce the number of columns as the viewport becomes narrower. in a dashboard card?

Problem: Cards should automatically reduce the number of columns as the viewport becomes narrower. Context: This CSS troubleshooting question uses a dashboard card example. Correct approach: Use auto-fit with minmax() so the grid can reflow automatically. Working CSS: .cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }