grid-template-columns, Chrome v. Firefox, Firefox stretching col width, Chrome keeping to content

.photos_div_right is mapping divs which contain <img/> elements:

 <div className="photos_div_right">
    {vehiclePhotos.map((photo, index) =>
      index > 0 ? (
        <div key={index}>
          <PhotoView src={`${photo}`}>
            <img
              src={`${photo}`}
              alt={`vehicle-${stockNumber}-photo-${index}`}
              onClick={openPreviewer}
            />
          </PhotoView>
        </div>
      ) : null
    )}
  </div>

 <div className="photos_div_right">
    {vehiclePhotos.map((photo, index) =>
      index > 0 ? (
        <div key={index}>
          <PhotoView src={`${photo}`}>
            <img
              src={`${photo}`}
              alt={`vehicle-${stockNumber}-photo-${index}`}
              onClick={openPreviewer}
            />
          </PhotoView>
        </div>
      ) : null
    )}
  </div>

.photos_div_right{
      display: grid;
      align-items:flex-start;
      grid-auto-flow: column;
      padding-top:.25rem;
      grid-template-rows: repeat(2, 49%);
      grid-gap: .6rem;
      overflow-y:visible;   
      border: 3px solid blue;

> div{
    display:inline-block;
    width:min-content;
    border: 1px solid red;
    >img{
      border: 2px solid blue;
    }
   }
}

.photos_div_right{
      display: grid;
      align-items:flex-start;
      grid-auto-flow: column;
      padding-top:.25rem;
      grid-template-rows: repeat(2, 49%);
      grid-gap: .6rem;
      overflow-y:visible;   
      border: 3px solid blue;

> div{
    display:inline-block;
    width:min-content;
    border: 1px solid red;
    >img{
      border: 2px solid blue;
    }
   }
}

Leaving grid-template-columns unset, Chrome defaults to content width, while Firefox (as well as iPhone) wants to stretch the columns. Most attempts at setting grid-template-columns are being flagged by Firefox as 'invalid values'. Has anyone come across this issue before? Alternatively, I'd also tried controlling column width by way of just setting the grid cell widths (the > div{}) explicitly, but have had similar trouble keeping these widths to the responsive width of the child image.

11 Replies

b1mind•5mo ago

Do you have height/width attributes on your images? its always recommended btw helps with paint but browsers like to render images different and without the height/width attributes FF will act funky in my experience.

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it.

thethingisbackOP•5mo ago

the images are rendering in the same way, same widths, behaving uniformly across browsers, but this is their setting:

.photos_div_right>* {

  >img{
        height:100%;
        width:auto;
  }
}

.photos_div_right>* {

  >img{
        height:100%;
        width:auto;
  }
}

b1mind•5mo ago

Since you are also not setting columns the grid is being affected no in html <img height="300" width="350" alt="" ... /> then keep what you have in css ofc but you need to give the attributes

b1mind•5mo ago

https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/

Smashing Magazine

Setting Height And Width On Images Is Important Again — Smashing Ma...

To prevent layout shifts and improve performance scores, we need to always set width and height attributes on our images. Here’s why and when it matters.

thethingisbackOP•5mo ago

So the grid container (.photos_div_right) which contains the child div grid items, which themselves contain the <img/> elements, is itself a child of .photos_div. Here is a wider view:

<div className="photos_div" scrollable="true" ref={photosDivRef}>
 <div className="photos_div_right">
    {vehiclePhotos.map((photo, index) =>
      index > 0 ? (
        <div key={index}>
          <PhotoView src={`${photo}`}>
            <img
              src={`${photo}`}
              alt={`vehicle-${stockNumber}-photo-${index}`}
                onClick={openPreviewer}
              />
            </PhotoView>
          </div>
        ) : null
      )}
    </div>
</div>

<div className="photos_div" scrollable="true" ref={photosDivRef}>
 <div className="photos_div_right">
    {vehiclePhotos.map((photo, index) =>
      index > 0 ? (
        <div key={index}>
          <PhotoView src={`${photo}`}>
            <img
              src={`${photo}`}
              alt={`vehicle-${stockNumber}-photo-${index}`}
                onClick={openPreviewer}
              />
            </PhotoView>
          </div>
        ) : null
      )}
    </div>
</div>

And this .photos_div container, has a responsive height and width:

.photos_div{
  width: 100vw;
  height:50vw;
  min-height:14rem;
  max-height:30rem;
}

.photos_div{
  width: 100vw;
  height:50vw;
  min-height:14rem;
  max-height:30rem;
}

This container responsiveness is affecting .photos_div_left (its grid container child)'s height, which is in turn affecting the sizes of its grid cell divs' heights.

b1mind•5mo ago

<img
              src={`${photo}`}
              alt={`vehicle-${stockNumber}-photo-${index}`}
                onClick={openPreviewer}
              />

<img
              src={`${photo}`}
              alt={`vehicle-${stockNumber}-photo-${index}`}
                onClick={openPreviewer}
              />

no height/width attributes* again read what I wrote read teh smashing article too

thethingisbackOP•5mo ago

right no i get what you're saying, i'm just wondering how to achieve this same respnsiveness if I'm hard coding a width in the html

b1mind•5mo ago

you just keep the same css but I would never use vh/vw with sizing (oh thats your parent div but still avoid it) The smashing article goes over it though, you set the attributes and then still set the sizes you want in css

thethingisbackOP•5mo ago

okay, i'll give it a read thank you

b1mind•5mo ago

np I hope it helps even if its not the solution (which I'm betting it is) its something you should be doing.

thethingisbackOP•5mo ago

right i gotcha

Gaming

Programming

grid-template-columns, Chrome v. Firefox, Firefox stretching col width, Chrome keeping to content