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

Posted 2020-09-07 Answer1215

 

 

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)
                    );