Search code examples
csscss-grid

CSS Grid with images is behaving different in Firefox

I have this HTML:

<div class="parent">
  <div class="container">
    <img class="image1" src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    <img class="image2" src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    <img class="image3" src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
  </div>
</div>

I want the .container div to have it's size defined by 20% of its .parent. This is what I got in Chrome: enter image description here

For achieving that I used these styles:

.parent {
  position: relative;
  width: 800px;
  height: 300px;
  background-color: green;
  margin: auto;
}

.container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-areas:
    "area1 area2"
    "area1 area3";
  grid-template-rows: 50% 50%;
  height: 20%;
  gap: 5px;
}

.image1 {
  grid-area: area1;
}

.image2 {
  grid-area: area2;
}
.image3 {
  grid-area: area3;
}

img {
  height: 100%;
}

However, I know the way I did is a bit messed and not consistent, for example, the 2 images on the right are taking 50% of the grid container, but I still need a gap which I used 5px.

This is my Codepen and if I open it in Firefox I get a different result: enter image description here

Looks like the grid container is expanding its width and I have no idea why, so how can I get a consistent cross browser result to look like in the first image?

I've used grid because it will be responsive and I'll change the template areas for mobile later, so using Flexbox isn't an option.

Solution

  • Wrap each image in its own container / wrapper (div or picture tag) and give it a height of 100%, then subtract each row and half the gap to fit in the main container.

    .container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-areas:
    "area1 area2"
    "area1 area3";
  grid-template-rows: calc(50% - 2.5px) calc(50% - 2.5px); /* changed */
  height: 20%;
  gap: 5px;
}

/* new class */
.wrapper {
  height: 100%;
}

img {
  height: 100%;
}

    <div class="wrapper image1">
   <img src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
</div>


    .parent {
  position: relative;
  width: 800px;
  height: 300px;
  background-color: green;
  margin: auto;
}

.container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-areas:
    'area1 area2'
    'area1 area3';
  grid-template-rows: calc(50% - 2.5px) calc(50% - 2.5px);
  height: 20%;
  gap: 5px;
}

.wrapper {
  height: 100%;
}

.image1 {
  grid-area: area1;
}
.image2 {
  grid-area: area2;
}
.image3 {
  grid-area: area3;
}
img {
  height: 100%;
}
    <div class="parent">
  <div class="container">
    <div class="wrapper image1">
      <img src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    </div>
    <div class="wrapper image2">
      <img src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    </div>
    <div class="wrapper image3">
      <img src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    </div>
  </div>
</div>