Grid by Example

Everything you need to learn CSS Grid Layout

auto-fill vs. auto-fit

Demonstrating the difference between the auto-fill and auto-fit keywords. Spec here and you’ll need Chrome 55 or Firefox with Grid enabled to see the difference.

In the first example we use the auto-fill keyword for repeat. We get as many tracks with a minimum of 200 pixels and maximum of 1fr as will fit in the container.

In the second example we use the auto-fit keyword for repeat. We get as many tracks with a minimum of 200 pixels and maximum of 1fr as will fit in the container.

After auto-placement any empty tracks are collapsed to 0. So our items can expand to take up the remaining space.

Read the specification | View example as full page

See the Pen Grid by Example 37: auto-fill vs. auto-fit by rachelandrew (@rachelandrew) on CodePen.