-
Hi. I have a layout with a Grid that uses “grid-template-columns: repeat(2, minmax(0, 1fr))” in desktop width. For mobile, I change it to “grid-template-columns: 1fr”.
The first column has some simple text, button, etc. The second column has a GB Carousel.
When I look at the page in tablet view (and by extension mobile view), the image in the Carousel infinitely grows breaking the layout of the page.
I am having a great deal of trouble pinpointing which attribute to change to stop this from happening. I have narrowed it down to the Loop Item on that Query Block. If I do not display that Loop Item, the issue resolves, but now I am no longer displaying the Loop Item, which is clearly a problem.
I am providing the page in question and the creds to see it in the private area. Could you please take a look?
Thanks for your time.
-
Hi there,
Can you try setting the
grid-template-columnsto100%instead of1frfor the containergb-element-40201facon tablet? -
Hi Ying. Thanks for looking into that. That worked, but did not understand why. So, I looked it up. Sharing here in case anyone is in the same boat.
“In CSS Grid, 1fr and 100% are not the same because 100% resolves to the absolute width of the parent container, while 1fr dynamically distributes only the remaining available space.”
So, I think that means that 1fr respects gaps and 100% does not. There must have been a child that was using fractional units somewhere and because the parent was also using fractional units, it kept growing?
-
I don’t really know how to explain it… using 100% makes sure the Grid does not expand beyond its parent element’s widt 🙂
- You must be logged in to reply to this topic.