July 30th, 2019
The most famous line of code to have come out of CSS grid so far is:
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
Without any media queries, that will set up a grid container that has a flexible number of columns. The columns will stretch a little, until there is enough room for another one, and then a new column is added, and in reverse.
The only weakness here is that first value in
minmax() (the 10rem value above). If the container is narrower than whatever that minimum is, elements in that single column will overflow. Evan Minto shows us the solution with
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
The browser support isn’t widespread yet, but Evan demonstrates some progressive enhancement techniques to take advantage of now.