Repeating grids, alternate version
The first grid in this example uses grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
while the second uses grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))
. Use Firefox' Developer Tools in order to view this demo. Its grid inspection tools are currently the state of the art.
auto-fill
fills-in the remaining space with anonymous grid items.
auto-fit
fits the items within the remaining space, expanding or shrinking as necessary.
Related specification: CSS Grid Layout Module Level 1.
Auto-fill
Grid item A
Grid item B
Grid item C
Grid item D
Grid item E
Auto-fit
Grid item A
Grid item B
Grid item C
Grid item D
Grid item E