Fixed or responsive columns
- Fixed:
grid-template-columns: repeat(3, 1fr);— always three equal columns. - Responsive:
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));— as many columns as fit, each at least 160 px wide; they wrap on smaller screens automatically.
The fr unit shares the free space between columns. gap sets the space between rows and columns.
Typical uses
Product and card grids, image galleries, dashboards and full page layouts. Resize your browser window to see the auto-fit preview reflow.
Frequently asked questions
What is the difference between auto-fit and auto-fill?
auto-fit stretches items to fill the row when there are few of them; auto-fill keeps empty column tracks.
Do I still need media queries?
Often not for card grids — auto-fit with minmax adapts on its own.
Is CSS grid supported everywhere?
Yes, in every modern browser.