been fighting with a client's weird grid requirements all morning. they want cards to just "work" without manual media queries for every single breakpoint. i tried using auto-fill but it leaves those massive, awkward gaps on the right side of the screen when you don't have enough items to fill a row. honestly auto-fit is much better because it stretches the tracks to cover the space. just set your column width with a minmax value and let the browser handle the math. it's way cleaner than writing out five different media queries for different screen sizes.
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
tbh seeing people still manually adjusting column counts in css is painful. it's just extra code to maintain and prone to breaking when the content changes.
never use fixed columns unless you actually want a broken layout on mobile. stick to the minmax approach and save yourself the headache.