Explicit and Implicit Grid

Using repeat notation Defining Grid Areas

When we use grid-template-columns and grid-template-rows we create an Explicit Grid. However if we try and place an item outside of that grid the browser will create an Implicit Grid line or lines in order to hold that item.

In the code below I have put e between grid column lines 4 and 5, these are not described with grid-template-rows, so an implicit grid line 5 is created.

By default the implicit grid tracks created by the implicit lines will be auto sized. However, you can size the tracks with the grid-auto-columns and grid-auto-rows properties. I have sized my auto tracks as 1fr to match the rest of the column tracks in my grid.

Credit to gridbyexample.com for inspiring this example.

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