KPC
Kevin Powell - Community•2w ago
Vito

Layout on mobile browsers breaks when grid-template-columns is not explicitly set.

The first two images show the layout on mobile. When there is no nested text the layout is fine and doesnt overflow, however as soon as I add text inside the image card, the content overflows. NOTE: this is only an issue on mobile browsers. it is not an issue on desktop versions of safari, chrome, and firefox which makes it even harder to test for me because it looks perfectly fine there. Here is the code that doesn't work.
My understanding was that I could just set grid with no template columns and use media queries to specify columns as screen size changes (I learned this from kevin). But for some reason it doesnt work in this case?- 
<div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 lg:gap-4">
  <figure className="w-full aspect-[5/3]">
      className={cn('group/link-focus w-full h-full', className)}
    >
      <Image
        ...otherPropsHere
        className="w-full aspect-[5/3] rounded-md group-hover:opacity-80 group-focus-visible/link-focus:opacity-80"
      />
      <div className="text-sm text-gray-800 line-clamp-2  lg:text-base">
        {subtitle}
      </div>

  </figure>
  
//...more figures
</div>
<div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 lg:gap-4">
  <figure className="w-full aspect-[5/3]">
      className={cn('group/link-focus w-full h-full', className)}
    >
      <Image
        ...otherPropsHere
        className="w-full aspect-[5/3] rounded-md group-hover:opacity-80 group-focus-visible/link-focus:opacity-80"
      />
      <div className="text-sm text-gray-800 line-clamp-2  lg:text-base">
        {subtitle}
      </div>

  </figure>
  
//...more figures
</div>
the fix I found? setting grid-cols-1. My question is, why is it completely broken unless I set this value. 
<div className="grid gap-2 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 lg:gap-4">
...stuff here
</div>

//other fix is just removing grid for the mobile layout 
<div className="sm:grid sm:grid-cols-2 lg:grid-cols-3 lg:gap-4">
...stuff here
</div>
<div className="grid gap-2 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 lg:gap-4">
...stuff here
</div>

//other fix is just removing grid for the mobile layout 
<div className="sm:grid sm:grid-cols-2 lg:grid-cols-3 lg:gap-4">
...stuff here
</div>
No description
No description
No description
4 Replies
Chris Bolson
Chris Bolson•2w ago
You shouldn't need to add grid-cols-1 or remove the grid. Where do you expect the text to go? I have just a quick test based on your code and didn't have the same issue. I suspect that something else is going on that is affecting this. Can you create a minimal Codepen (or similar) to demonstrate the issue? Note - seeing as you are using the figure element, it would make sense to use the figcaption element for the accompanying text.
Vito
VitoOP•2w ago
The text is suppose to just be under the image. if you look at this photo this is what it looked like on my pc. It was only broken on all the browsers on my phone.
No description
Vito
VitoOP•2w ago
And thats exactly my point. I shouldnt need to remove the grid or add grid cols. The layout was only broken on my phones browsers. There a layout issue at all when testing it responsively on my pc I’ll try throwing it up on codepen and see if it breaks
Chris Bolson
Chris Bolson•2w ago
It may be due to defining the aspect ratio 🤔 If you don't define a grid-column width (as is the case for the smaller viewport) the width will be "auto" and therefore defined by the content within it. As you have given both the figure and the image an aspect ratio, these are "forcing" the width and the height which is possibly causing the issue that you are having (I can't reproduce it with your code which is why I thought that it may be something else that you haven't included). By defining grid-template-columns: 1fr you are telling the column to have 100% width of the parent rather than the width of the children.

Did you find this page helpful?