"Auto filled" grid not working as expected with subgrids
As stated in the title I'm facing an issue with grids when columns are auto filled and rows are subgrids.
I'm not sure if this is me who missed something or if this is an issue on these new grid features.
I made a reproduction here
=> if you shrink your window horizontally :
- the first items (without subgrid) will "wrap" as expected
- the second ones (with subgrid) won't and I don't know why
7 Replies
You aren't actually using subgrid on your columns, only rows and those are wrapping . I'm not totally certain what behaviour you're after? You want the columns to wrap on the elements you've declared grod-template-rows: subgrid ?
like this?
https://codepen.io/MarkBoots/pen/NWZrgLr
No, I'm using them on rows only, columns are in autofill (or I made a mistake somewhere) and when doing so, I have a weird behavior where my las card doesn't go below the first one it has no more space next to it
Yep, that's exactly what I want
I'll take a look at your code and try to figure out what I missed
It seems to de due to
grid-template-rows 🤔 That is weird, isn't it?
If I want to be more specific on my rows, I can't clearly define them, or it would break the wrapping behavior 😕
Actually it's not grid-template-rows but grid-row or grid-row-start that breaks itI may be missing something too. I didn't realize you could use subgrid on implicit rows since OP has not defined a row template on the parent grid. Is that correct or have I passed over a line of code somewhere?
I didn't realize either but it seems so! As long as you declare
grid-row-end: span 4, it seems like it implicitly create 4 auto rows
or grid-row-start: span 4 too
And in the end this not grid-row-start that breaks my expected behavior but the combination of grid-row-start and grid-row-end (or grid-row)
But that still feels weirdYeah the span keyword makes sense I just thought you had to explicitly define a template to use subgrid. Very interesting stuff. Use the span keyword instead of specific lines and it should follow the parents row size
I don't know if it is an expected behavior of if that's an issue
...
I just realized what was my issue 😅
how could the cards wrap when I specified that the
grid-row-start IS 1.... in my example, if I want the second one to wrap under the first one, then its row-start has to be 4... 😅 That's why I need span 4...
Thanks to both of you for your help 😄 I'm marking this issue as solved!