Line-based placement shorthand – grid-row and grid-column
We can achieve the same result as in example 2 using a shorthand syntax declaring the start and end values at once. Values are separated with a / and again it would be valid to omit the / and the end value as we are spanning only one track.
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: 2 / 3;
grid-row: 1 / 2;
}
[fl_row] .b {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
[fl_row] .c {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
[fl_row] .d {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
[fl_row] .e {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
[fl_row] .f {
grid-column: 3 / 4;
grid-row: 1 / 2;
}