TIL auto fit multiple column with CSS grid

 If you don't knwo how may items you will have and want them to fit in a row, you can use CSS grid. It is a powerful CSS feature (with my favourite flexbox).

.container {
 display: grid;
 grid-template-columns: repeat(auto-fit, 160px);
 justify-content: center;
 gap: 20px;
}

The tricky part is line 3 where you fill a column with all the items (repeat) that can fit in the screen width with 160px width each and separated with 20px gap. 

 

Enjoy!