Line-based placement named lines with spans Explicit and Implicit Grid

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

A

B

C

D

E