How to get grid-template-columns to be responsive
Originally published on July 23rd 2018, but updated on March 16th 2020.
CSS Grid is awesome, but when you make something custom it isn’t responsive by default.
If the site you are creating has multiple columns, then by default a smaller size the columns wouldn’t look good.
In your CSS where you are using grid-template-columns, put auto, after it, for an example use
grid-template-columns:autoand repeat auto based on the number of columns you have.
That’s it. It took me many hours to get it, now you can do it quickly.