CSS grid layout exhibiting an undesirable space in the far right column

I've encountered an issue while attempting to create a grid template layout - there seems to be an unexpected column gap appearing on the right side. Any suggestions on how I can get rid of this?

For reference, you can view the problem at this link (notice the extra column gap on the right): https://i.sstatic.net/pPKNU.png

Below is the HTML and CSS code I am using:

.container {
  width: 100%;
  max-width: 1920px;
  margin: auto;
}

.img-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 30px;
  grid-template-areas: 'img-1 img-2 img-3';
}

.img-gallery div {
  width: 100%;
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="img-gallery">
    <div class="img-1" style="background-image: url(images/img-1);"></div>
    <div class="img-2" style="background-image: url(images/img-2);"></div>
    <div class="img-3" style="background-image: url(images/img-3);"></div>
  </div>
</div>

htmlcss

Answer №1

I recently tested this using an image link of my own, and it worked perfectly. There was no unwanted gap in the rightmost column at all. I also took out some unnecessary code segments (they are now commented out) from your code:

.container {
  width: 100%;
  max-width: 1920px;
  margin: auto;
}

.img-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 30px;
  /*
  grid-template-areas: 'img-1 img-2 img-3';
  */
}

.img-gallery div {
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /*
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  */
}
<div class="container">
  <div class="img-gallery">
    <div class="img-1" style="background-image: url('https://s4.uupload.ir/files/1-6-5_ssnb.jpg');"></div>
    <div class="img-2" style="background-image: url('https://s4.uupload.ir/files/1-6-5_ssnb.jpg');"></div>
    <div class="img-3" style="background-image: url('https://s4.uupload.ir/files/1-6-5_ssnb.jpg');"></div>
  </div>
</div>

Answer №2

I went through your code and did not come across any issues.

Please review the code below:

<!DOCTYPE html>
<html lang="en>

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge>
  <meta name="viewport" content="width=device-width, initial-scale=1.0>
  <title>Document</title>
  <style>
    .container {
      width: 100%;
      max-width: 1920px;
      margin: auto;
    }
    
    .img-gallery {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto;
      grid-column-gap: 30px;
      grid-template-areas: 'img-1 img-2 img-3';
    }
    
    .img-gallery div {
      width: 100%;
      height: 300px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="img-gallery">
      <div class="img-1" style="background-color: red;"></div>
      <div class="img-2 " style="background-color: green;"></div>
      <div class="img-3" style="background-color: yellow;"></div>
    </div>
  </div>
</body>

</html>

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

What is the process for choosing a table column by clicking on the "select" option?

Welcome to my project! Here is an example table that I'm working on. I have a question - how can I make it so that when I click on "choose me", the entire column is selected? Can you help me with this? <table> <tr> <th>plan A&l ...

javascriptphphtmljquerydom

obtaining the values from a dynamically generated group of checkboxes

My dynamic checkboxes are categories that can be selected individually. <input type="checkbox" name="SubCats" class="subcat-checkbox" value="18001700">first</input> <input type="checkbox" name="SubCats" class="subcat-checkbox" value="180018 ...

htmlasp.net-mvccheckbox

There seems to be an issue with the on() function in jQuery when using mouseover

I am trying to implement a small popup box that appears when I hover over some text, but for some reason it's not working as expected. Can someone please help me troubleshoot this issue? My goal is to display the content from the "data-popup" attribut ...

jqueryhtmlcss

What is the best way to transform XML into a two-dimensional array using JavaScript?

I really need to store the array in a variable. Currently, I am utilizing .DataTable for pagination. However, it doesn't support tables generated from XML using JavaScript. Based on this source, I have to convert my XML into a 2D array. Below is the ...

javascripthtmljqueryarrays

Implementing text overlays on images within a Bootstrap 4 navigation bar

I am struggling to grasp the flex structure in Bootstrap. I'm attempting to overlay text on an image within the navbar, but it seems the container of the navbar is causing issues. Perhaps my containers are not set up correctly. Any assistance would be ...

htmlcsstwitter-bootstrapbootstrap-4

When the user clicks on the element, the onclick function captures the input data from

I'm currently learning JavaScript and attempting to redirect to a different page based on user input. /MenuDemo1/src/home.jsp After filling in the two text boxes above and clicking the button, I manage to retrieve the username and password. However, ...

javascripthtmlformsjsp

Steps for implementing overflow scroll on a div with an unspecified height

The layout I'm working with looks like this: .page { width: 360px; height: 704px; border: 1px solid red; } header { height: 10%; width: 100%; display: flex; align-items: center; justify-content: center; background-color: lightblue; } ...

javascripthtmlcssoverflow

Having trouble with the toggle button on the Bootstrap 5 navbar?

I am facing an issue with my HTML code where the toggle button does not display properly when I resize the browser screen. Upon clicking on it, the navigation bar items do not show at all. Here is a screenshot of my website <html> <head> ...

javascripthtmljquerycssbootstrap-5

Discover the secrets to showcasing just the vivid hues of red and green based on a specific threshold with the HTML Meter component

Hello Team, I am trying to use a Meter Element in HTML and I want to display either Red or Green color depending on the value change. When the Value is less than 20, I want the Meter color to be RED, and if the Value is greater than 20, then the Meter col ...

htmlmeter

ImageMapster for perfect alignment

I'm struggling with centering a div that contains an image using imagemapster. When I remove the JS code, the div centers perfectly fine, indicating that the issue lies with the image mapster implementation. It's a simple setup: <div class=" ...

javascriptjqueryhtmlcss

Modify the Color of Chosen Anchors for Site Categories WITHOUT Using JavaScript

Is there a way to change the color of section anchors in a fixed header when selected without using JavaScript? I'm looking for a CSS-only solution that will change the color of the selected anchor and revert it back to normal when another anchor is c ...

htmlcssanchorsections

Unique CSS content for varied designs

I have a CSS code snippet for a tooltip: .GeneralTooltip { background:#c7430f; margin:0 auto; text-transform:uppercase; font-family:Arial, sans-serif; font-size:18px; vertical-align: middle; position:relative; } .GeneralTooltip::before { content:"This is ...

htmlcsstooltip

I am struggling to increase the width of my input bar and center-align it

Below is the CSS class I've created to ensure that all elements remain centered on the user's screen. container: { display: "flex", position: "absolute", top: 0, left: 0, height: "100%&qu ...

htmlcssmaterial-ui

The responsiveness issue with the Bootstrap button menu in my Django project is causing functionality problems

I am currently working on a Django project and have set up a static folder in my "accueil" application. However, when I resize the browser window, the button to show the menu does not function as expected. The template I downloaded for free is not working ...

djangohtmltwitter-bootstrapcss

Converting an HTML table into a multi-series chart

Is there a way to automatically convert an HTML table into a multi-series chart using JavaScript or jQuery? Here is a sample of my table: | Category | YYYY | YYYY | YYYY | | Asset | 1,500.00 | 3,590.00 | 5,000.00 | | Revenue | 2,560 ...

javascripthtmljquery

How can I modify the appearance of a slider's range?

I'm struggling with customizing the style of a price slider input range. No matter what I do, the changes don't seem to take effect. Can anyone pinpoint where I may be going wrong? Appreciate any guidance on this! Thank you! <div class=" ...

javascripthtmljquerycssslider

The draggable functionality is malfunctioning once the image is enlarged with Jquery

When it comes to creating a viewport function using jquery.viewport, I'm faced with the challenge of integrating it with jQuery UI slider and a custom zoom function for images. I've also utilized a plugin to enhance the viewport functionality. T ...

javascriptjquerycsszooming

Themes in Next.js with a splash of color

Is there a way to implement theming with color picking for elements? Check out the example here. I've explored using CSS variables and changing the document classname, but I'm uncertain if this is the best approach. @tailwind base; @tailwind com ...

cssreactjsnext.jsthemescss-variables

Effortlessly adjust item width in CSS Grid

I am currently utilizing CSS Grid to showcase various tags. If a tag happens to be quite large, with a width exceeding 150px, I would ideally like that specific item to expand across multiple columns as necessary. For instance, in the visual representation ...

cssreactjscss-grid

How can we create lists using parentheses specifically with Javascript or jQuery?

I am looking to create a formatted list using <ol> and <ul> tags with parentheses included. (1) List1 (2) List2 (3) List3 (4) List4 The challenge is to achieve this formatting purely with javascript or jQuery, without relying on any external ...

javascriptjqueryhtmlcss