Auto Fit:
In the previous lesson we saw how grid-template-columns, repeat and minmax
can be used to create large layouts with minimum code. Now let's see how to make
these large layouts responsive for small screen devices.
To achieve wrapping of multiple columns we can use auto-fit.
Let's look at an example
grid-template-columns: repeat( auto-fit, minmax(50px, 1fr) )
So in the above example we observed that auto-fit tries to fit into the
currently available space by expanding the grid items, by using minmax we
ensured that the grid items don’t get too narrow.
Auto Fill:
Similar to auto-fit the auto-fill creates implicit columns whenever a new
column can fit, but instead of expanding the grid items, it adds empty
space which could be seen by inspecting the DOM elements of the grid container.
Try resizing your browser window, to see it in action.
