Using repeat notation
In example 8 we repeated the same definitions to create our grid with named lines. We could save some typing by using repeat
notation. The values for repeat are the number of times you want the expression to repeat and then the expression.
Credit to gridbyexample.com for inspiring this example.
[fl_row] { display:grid; grid-gap: 10px; grid-template-columns: repeat(4, [col] 1fr ) ; grid-template-rows: repeat(3, [row] auto ); } [fl_row] .a { grid-column: col / span 2; grid-row: row ; } [fl_row] .b { grid-column: col 3 / span 2 ; grid-row: row ; } [fl_row] .c { grid-column: col ; grid-row: row 2 ; } [fl_row] .d { grid-column: col 2 / span 3 ; grid-row: row 2 ; } [fl_row] .e { grid-column: col / span 4; grid-row: row 3; }