When creating layouts, you would want to create something that is flexible despite screen size.

CSS Grid helps us define flexible layouts with a few lines of code.

Let's say I want to define a layout with 3 columns, I could do something like this: grid-column-template: 1fr 1fr 1fr

The problem with the above line of code is that if the screen size reduces, the layout doesn't resize and adapt to the current screen size.

There's an easy way to achieve that: grid-column-template: repeat(auto-fit, minmax(300px, 1fr))

This way when the screen size reduces, the number of columns can reduce to fit the current screen size.

I use this alot to create flexible layouts.