My dilemma involves a div with a height of 15vw and the desire to insert four images into this div (each image's size is 1920*1080 px). When using the code below, everything appears correctly in Chrome. However, in Firefox, each image size is 195*110 (which is fine), but each grid cell width is forced to be 1920px! The goal is for the width of each cell to match the width of the image.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: green;
height: 15vw;
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
grid-auto-flow: column;
grid-auto-columns: min-content;
gap: 10px;
}
.image {
height: 100%;
}<div class="container">
<img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_f0297eacbfb4266f311a8cb4137e4ef8b7cdd00b.jpg?t=1582550242" alt="" class="image">
<img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_bd875dbf865e70cda73a7cd6b132cadacfdb768b.jpg?t=1582550242" alt="" class="image">
<img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_7ef17676a804b0d646c38583ba0f68f33b3f3d9e.jpg?t=1582550242" alt="" class="image">
<img src="https://steamcdn-a.akamaihd.net/steam/apps/412020/ss_23815433fdd4a63064da79222fdefb569eeafaba.jpg?t=1582550242" alt="" class="image">
</div>In Google Chrome: Preview the layout in Chrome
In Mozilla Firefox: Preview the layout in Firefox