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