Grid Without Media Queries

This is the " killer feature " of CSS Grid. You can create an adaptive gallery that decides itself how many columns fit on screen, without a single @media.

Success Formula:

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

How It Works?

1. minmax(250px, 1fr): Column can't be smaller than 250px, but can grow infinitely.
2. auto-fit: Browser will calculate how many 250px blocks fit in a row. If 3 fit — it makes 3. If you narrow the window and only 2 fit — it will move the third block down.