[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;
}