[Grid Layout] Use the repeat function to efficiently write grid-template values

We can use the repeat() function if we have repeating specifications for columns and rows. With the minmax() function, we can define a size range for our grid items. Let’s see how to apply these properties, and how it affects the behaviour of our grid layout.

 

Using repeat:

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

 

Can aslo add named grid line to it:

so that we can refer to those later.

        .container {
            display: grid;
            grid-gap: 10px;
            height: 100vh;
            grid-template-columns:
                [start] repeat(
                    3, /*each row has 3 repeat items*/
                    [col-xs-start] minmax(10px, auto)
                    [col-xs-end col-sm-start] minmax(20px, auto)
                    [col-sm-end col-md-start] minmax(40px, auto)
                    [col-md-end col-lg-start] minmax(80px, auto)
                    [col-lg-end]
                ) [end];
        }

        .box:nth-of-type(26){
            grid-column: col-sm-start / end;
        }