A responsive grid with one line of CSS

I'm not the first to discover this by a long stretch but worth noting. Anything with display:grid or display:grid-lanes can be fully responsive at any viewport width with this syntax (where 45ch is the minimum inline size at viewport sizes greater that 45ch) grid-template-columns: repeat(auto-fit, minmax(min(100%, 45ch), 1fr)).

Until we had the min() function it was only possible to be responsive above a certain minimum viewport width with something like grid-template-columns: repeat(auto-fit, minmax(45ch, 1fr)); combined with a media query i.e. @media (min-width: 45ch) { /* responsive grid styles */ }.