About Making a Responsive CSS Grid

I stumbled across this video by British web developer Rachel Andrew. I don’t know what it is about developers from Britian, but they are a super-intelligent and crafty lot. The video is excellent but I’ll skip to the point and share the most useful CSS declaration I think I’ve ever seen:

grid-template-columns:repeat(auto-fit,minmax(100px,1fr));

This declaration for columns in a CSS grid will make up a responsive grid of cells that are at least 100px wide and filling the available horizontal space, wrapping to the next row when necessary.

I highly recommend watching the entire video. It’s one of the best explanations of using CSS grid.