[Grid Layout] Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

 

 

What about the situation in which we aren’t specifying the number of columns or rows to be repeated? There are two properties we can use in this situation; auto-filland auto-fit. We’ll explore what each one does and why we would need to use them on our grid-tracks.

 

For example, we have current solution:

            grid-template-columns:
                    repeat(
                            3, /*each row has 3 repeat items*/
                            minmax(10px, auto)
                            minmax(20px, auto)
                            minmax(40px, auto)
                            minmax(80px, auto)
                    );

We tell it to repeat 3 times for a row.

But what if we don't want to hardcoded '3'. We want to dynamic change according to viewport.

 

We can use 'auto-fill' for that:

            grid-template-columns:
                    repeat(
                            auto-fill, /*each row has 3 repeat items*/
                            minmax(50px, auto)
                            minmax(70px, auto)
                            minmax(90px, auto)
                            minmax(110px, auto)
                    );

 

 

 

We if we don't have enough box to fill the whole space. We can use 'auto-fit':

 

            grid-template-columns:
                    repeat(
                            auto-fit,
                            minmax(50px, auto)
                            minmax(70px, auto)
                            minmax(90px, auto)
                    );