The auto-fill keyword in repeating track definitions
In example 9 we stated that we wanted our row track list to repeat three times. The spec also defines auto-fill and auto-fit keywords.
In this example, I am creating a grid that contains as many 1fr column tracks as will fit into the container (in the example this is the viewport).
Credit to gridbyexample.com for inspiring this example.
[fl_row] {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 1fr ) ;
}
[fl_row] .a {
grid-column: 1 / 3;
}
[fl_row] .b {
grid-column: 3 / 5 ;
}
[fl_row] .c {
grid-column: 1 / 2 ;
grid-row: 2 ;
}
[fl_row] .d {
grid-column: 2 / 5 ;
grid-row: 2 ;
}
[fl_row] .e {
grid-column: 1 / 5;
grid-row: 3;
}