I have a card grid with: repeat(auto-fit, minmax(300px, 1fr)) as template columns. This works fine, unless there’s less than than the number of item that can fit in the column.
so for instance, when I filter posts and only have 1 result, the card of the 1 result takes up the whole width of the grid. I don’t wan that, I wan it to respond like it would with multiple results.
How do I fix this?
does fr needs a fraction division number? like 1 fraction of ? total
Not sure what you mean, but my plan was to have the grid automatically adjust with the minmax. But this obv does not work with the situation I ran into.
So my main content container width is 1160. The minmax set the minimum value to 300, this would mean 1fr 1fr 1fr on desktop — and lower screen width adjust to the 300px value. I would like w 1 result on desktop to have the card only take 1 “slot” of the 3.
Am I explaiing this correct / clear?
I understand, i never use fractions so i just read that they are normally defined by (3, 1fr); where 3 is the total number of fractions and 1 is the number used.
Also, if the minimum is 300, but there’s no other content, css might claim the full width as it has no other fraction to decide its width.
maybe defining the total number does something: repeat(auto-fit, minmax(300px, 3, 1fr))
i’m no expert… just trying to help.
Yes that’s also an option, but this way is more granular, but it obviously comes with the problem I’ve just encountered 
Also trying to wrap my head around this. Tnx
Quoting “unless there’s less than than the number of item that can fit in the column.” i just think its a max size issue.
Thereby defining the number of fractions lets it know its max size.
No, it does not do anything at all, I’m afraid
if you try this syntax: repeat( 3, minmax(300px, 1fr) );
That’s it tnx! I still dont understand the logic behhind it, need to circle back to this obviously. But my problem for now seems to be solved.
Btw in Bricks is woulld be added like this: repeat( 3, minmax(300px, 1fr)) — for aany possible future people encountering this
I think the logic is:
fr = fraction, fraction needs a fraction total
min 300px makes it work on your screen as it happens to fit the max screen size
Giving the fraction a total number makes it really calculate the size it should take up defined by the fraction given.
Aaah fk me. It doesn’t work after all, it’s not responsive like this
If it now starts to push it all by 3’s, then probably the min size 300px was formatting it properly before.
Maybe check the containing box settings if set to wrap, and not no nowrap forcing it inline.
And maybe consider witdh 33% and minwitdh 300px tring to make it wrap.
I got it
repeat(auto-fill, minmax(300px, 1fr))
It’s seems to be the switch to “auto-fill” instead of “auto-fit”