Defining a Grid Line-based placement shorthand - grid-row and grid-column

Using the Grid I defined in example 1, I am positioning the elements in my markup (six divs with a class of box and classes from a to f) using line-based placement properties. This example is more verbose than it needs to be as a demonstration of the properties. In reality, if an item will only span one grid track you may omit the -end value.

Credit to gridbyexample.com for inspiring this example.

[fl_row] {
    display:grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}
[fl_row] .a {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}
[fl_row] .b {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}
[fl_row] .c {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}
[fl_row] .d {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}
[fl_row] .e {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}
[fl_row] .f {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}

A

B

C

D

E

F