How to get grid-template-columns to be responsive

  • Post author:
  • Reading time:1 mins read
  • Post category:Uncategorized

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


and 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.


Thanks for reading. If you like what you read or it has helped you in some way, please consider supporting me through PayPal, Ko-fi, E-Transfer (Canada only), or any of the other ways on my support page.