Grid auto-fill or auto-fit min and max-width?
Using
grid-template-columns repeat(auto-fill, minmax(300px, 1fr)) gets me 75% of the way there
But this still allows for the cards to grow too much, if i instead use a single value like grid-template-columns repeat(auto-fill, 300px) it is also almost what i want but now the columns will stay the same size without any shrinking/growth,
using grid-template-columns repeat(auto-fill, minmax(300px, 1fr))
+ max-width: 400px; on the children of the grid is like 90% of the way there except that if the columns grow bigger than 400px i would have to use justify-items: center; but that gives the children a larger "gap".
is there any way to specifically set a column min/max width using auto-fill so the children are always between for example 300px and 400px?
and also having the columns flow/resize dynamically instead of suddenly snapping at 300/400px "intervals".10 Replies
Wanted behaviour example:
Starts with 1 column with a width of 300px
window grows + 50px
column grows + 50px (col-width = 350px)
->
window grows + 49px
column grows + 49px (col-width = 399px)
->
window grows + 1px
+ 1 column
columns width shrink to 300px again
i also never want any column to be smaller or larger than another all should be the same size and should never be smaller or larger than min/max width.
if there is 1 child or 20 children should not change the sizing of anything, it should behave the same.
column-gap should also always be the same, meaning the width of the column should be the same width as the child
justify (start/center/end) should not change spacing between children
I think you want auto fit instead of auto fill?
Hmm but no you still have max size defined the behaviour should be similiar
In this situation i would like the column to fit like this:
Not that important when its only 1 column, but on 2 it adds extra gap:
This is with
grid-template-columns: repeat(auto-fit, 240px);and it's probably the best option for consistency, but its missing the smooth shrinking/growth
video of what i want except for when there are only 1 or 2 columns:
What you're asking for isn't possible...
When we use minmax(), we're saying the smallest a column can be. To make the math simple, let's go with the example you gave of
300px.
We'll throw a gap in there too, of 10px to keep the math simple.
So, if the parent has a width of 900px, we'd have 2 columns because 300px + 300px + 10px = 610px - so, we only have 290px left over, which isn't enough room for another column, since the min is 300px.
With the minmax, that means the columns are stretching to fill that 290px of leftover space.
We have 2 columns, so, 290 / 2 = 145, so each column is now 145px + 300px = 445px.
If we set a max-width on our elements, of the 400px you want, that means they won't fill up their columns, and there will be 90px of extra space (as you described).
There's nothing we can do about that... The browser can't make another column, because those columns would be too small to hit the 300px minimum size.I see, ty 🙂