CSS Master Code Examples: Chapter 5

Back to chapter demo list

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