How to Fill In CSS Grid with Auto-Fitting Content
How to Fill In CSS Grid with Auto-Fitting Content
This is one of those things that I'm always looking up and it might take two google clicks which is one click too many. Hopefully with it on my blog it'll be easier for me to find it.
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
Quick Breakdown
grid-template-columns => Do what I say into columns.
repeat(this-many-times, do-this) => First argument is how many times to do the second argument.
This one messess me up. For some reason my brain always wants to reverse these two. I want to (do-this, this-many-times).
Now, auto-fill, or auto-fit, Sara Soueidan said it best so I'm going to quote her.
auto-fillFILLS the row with as many columns as it can fit. So it creates implicit columns whenever a new column can fit, because it's trying to FILL the row with as many columns as it can. The newly added columns can and may be empty, but they will still occupy a designated space in the row.
auto-fitFITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. The browser does that after FILLING that extra space with extra columns (as with auto-fill ) and then collapsing the empty ones.
Read her full article over on CSS Tricks here
minmax(min, max) This one is self explanatory. At least it should be. min is the smallest the grid-item can go, and max is the largest the grid-item can go.
Anyway, I hope this helps. If it did, let me know.