Grid autofilling slots
Is there any way for the grid to fill in the empty slots?
https://gyazo.com/4228dd1f37765c2005faca892f8ae6ea
As simple as the demo shows. I was wondering.
36 Replies
auto-fit?
Uh, wait, how?
I'm talking about these.
The top have
grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));.oh you are using fit yea then its doing what it can do
But my question is more around those empty slots.
They change depending on the viewport.
you would have to know at what break point and make the last elements react
It's going to be impossible ðŸ˜
Since they resize automatically, it changes so many times.
yea typically not a practical solution
From 1 to 4 empty slots.
I mean, flex kind of does this... better.
But somebody complained to me grid looks "better" (as they're all always sized the same).
I was doing it this way.
Yea this would be a case where if that is what you wanted flex does it best
Fuck me 
personally I like the grid
It's just my mind gets bothered by this.
Might be just my OCD.
size them smaller and lil padding
?
then you would deal with more on one/two lines than currently
The problem is the third one, will remain the same.
As there's only 3 elements, and that will make it worse.
also this would be a great case for container queries in the future 😄
How come?
cause you could then set your own rows/cols based on the size of the parent
its going to be a game changer
the auto-fit/fill is what it is and great for that one pattern.
But wouldn't that be just like a media query?
but I find lots of times if I want specific look I end up defining cols/child areas based on media queries
I understand the differences between the two, I just don't understand how it would make it better, at least in my mind.
no cause the parent would expand contract
its children could react to that vs more page breakpoints
Yeah, media is viewport, container is the container.
so if the container is 500px its always going to display x
even if its side by side with another of the same
or on top of
Yeah.
Hmm, I guess less media queries.
I bet there has to be a JS that calculates the grid slots, and fills in divs x)
yea then you get into components it brings the real power
But it's out of my realm at the moment.
I would assume it would have to be a script that views all 4 grids, checks the total amount of columns/rows, and fills in the empty ones with a filler div with whatever class.
At least from what I perceive here, it detects the empty rows.
Also, a small side topic. But do you know if there's a way for a CSS tooltip not be affected by
overflow: hidden?not if the parent is hidden
you would have to pull it out of the flow with absolute or fixed and give it a non hidden relative
Hmm, it has absolute.
I guess I will have to open a new thread for this LOL