In Firefox, the width of a CSS grid cell is larger than the actual content it contains

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.

Check out the full code here

* {
  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

cssfirefoxcss-grid

Answer №1

By setting the container tag display property to 'table' and adding display 'table-cell' property to the img tag, I was able to achieve the desired layout. You can see the implementation here.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    background-color: green;
    width:100%;
    height: 15vw;
    display: table;
}

.image {
    width:25%;
    display:table-cell;
    padding:10px;
    float:left;
}
<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problems with scrolling in the navigation bar, main content area, and footer

The challenge Encountering a scrolling anomaly with the Navigation Bar, Body, and Footer while utilizing Bootstrap 4. Everything appears to function smoothly on the desktop view. The glitch arises when I reduce the viewport size. The body fails to stay in ...

htmlcssbootstrap-4

What is causing the initial activation of the <button> within a form?

Within my <form>, I have included 2 submit buttons. The first button looks like this: <button class="regular" id="geocodesubmit" style="height:40px;">Set Location</button> The second button looks like this: <button type="submit" ...

javascripthtmlcssforms

Setting distinct fonts for input placeholder and value: A guide

Can different fonts be set for an input placeholder and value? I have a scenario where the input placeholder is in a right-to-left language while the value is in English. Is it achievable using CSS3? ...

htmlcssplaceholderhtml-input

Issue with Firefox browser: Arrow keys do not function properly for input tags in Twitter Bootstrap drop down menu

Requirement I need to include a login form inside the dropdown menu with username and password fields. Everything is working fine, except for one issue: Issue When typing, I am unable to use the arrow keys (up/down) in Firefox. This functionality works ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Strategies for creating a grid-inspired layout: tips and tricks

Recently, I've been tasked with creating a catalogue section for our e-commerce site. My designer came up with this layout which I find really appealing, but I'm having trouble figuring out how to implement it. I attempted using tables, but it di ...

htmlcssflexboxtailwind-css

Is there a way to use Media Queries to require CSS to load an image?

Here is the CSS code I am using: html { background: url(../img/header_mobile.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* Smal ...

htmlcssresponsive-design

Display data when clicking on Tailwind

I am currently displaying a sub menu on hover using Tailwind CSS. However, I am wondering how I can achieve the exact same functionality by triggering an onclick event instead of hovering over the menu. Here is a DEMO showcasing the current setup. CODE: ...

javascriptcsstailwind-css

Targeting elements using CSS3 animations

http://codepen.io/janesmith/pen/dqweasd Need some help with this issue. I am trying to have the div start with a scale of 0 and then scale in when clicked. However, my attempt was unsuccessful. CSS /* Styling for Content Area */ .content div { width ...

htmlcss

nyroModal automatically adapts its dimensions according to the size of the webpage, not the size of

A situation has arisen with a link that opens an image using nyroModal. While everything is functioning correctly, the Modal window appears in the center of the page instead of aligning with the middle of the browser window. As a result, only the upper por ...

javascriptjqueryhtmlcssnyromodal

The layout of the divs becomes distorted when the window is resized

When adjusting the window size, all elements in the center become cramped and unresponsive. Even the navigation items in the header do not resize properly. Here is my Triangle.js file: import React from 'react' import { motion } from 'fram ...

htmlcssreactjs

Styling an image with dual attributes using CSS

I'm looking to customize two img classes with different properties. For instance, in my CSS, I want to define: img { padding-left: 15pt; float: right; } and then: img1 { padding-left: 15pt; float: left; } where img1 would serve as a tag fo ...

htmlcss

Troubleshooting Vue 3 Options API custom element with non-functional Bootstrap js files

Having trouble incorporating Bootstrap 5 into a Vue 3 Options Api custom element? Check out my setup below: import { defineCustomElement } from 'vue' import 'bootstrap/dist/js/bootstrap.bundle' import App from './App.ce.vue' ...

cssvue.jsvuejs3bootstrap-5custom-element

Functionalities of HTML controls

I currently have a select element in my HTML code which looks like this: <select> <option id="US" value="US"> </option> <option id="Canada" value="Canada"> </option> </select> My requirements are twofold: ...

javascriptjqueryhtmlcss

Unable to load CSS styles from SCSS when rendering the view

I am having trouble loading styles on my webpage from SCSS. Below is the code from my Gulp.js file: // Compile and Automatically Prefix Stylesheets gulp.task('styles', function () { return gulp.src([ 'Content/styles/**/*.scss&apo ...

cssangularjsgulp

Enhance Vaadin 14: Automatically adjust TextArea size when window is resized

Using Vaadin 14.1.19 in a project called "My Starter Project," I attempted to create a TextArea that supports multiple lines. Initially, everything seemed fine, but upon resizing the TextArea, it failed to adjust the number of visible lines. Here is the co ...

javascriptcssvaadinvaadin-flowvaadin14

Tips on moving down the `<li><span>` elements with the jQuery `.slidedown()` method

I'm struggling to articulate my question clearly, so please bear with me. Essentially, I have a jquery script that reveals content within a div nested in an li. When I click on the header, the content drops down and visually pushes the next header do ...

jqueryhtmlcss

The art of jQuery: Effortlessly animate the deletion of a CSS property

When using jQuery, I often "collapse" certain DOM elements by decreasing their width to 0px and fading them out. Here is an example: $(".slideoutmenu").animate({ width: 0, opacity: 0}, function() { $(this).hide(); }); The widths of these elements can var ...

jquerycss

initiate changes to the application's style from a component nested within the app

I'm looking to update the background color of the entire page, including the app-nav-bar, when I'm inside a child component. When I navigate away from that component, I want the default style to be restored. Any suggestions on how to achieve this ...

cssvue.jsvue-componentvuetify.js

Checking for the existence of a CSS selector in Jasmine test suite

Testing out the latest version of Jasmine and Karma with an AngularJS instance. I attempted: expect(element('a.topic-heading-link-10')).toBeDefined(); However, I received this response: expect undefined toBeDefined undefined http://example.co ...

cssangularjsjasminekarma-runner

Designing a unique pagination layout for your WordPress website

Currently, I am working on a WordPress project. I have created my own template using CSS and HTML format. The implementation is going well, but I am facing difficulty integrating WP pagination design into my template. Below is the pagination code from my ...

phphtmlcsswordpress