Unwanted gap in the rightmost column in CSS grid layout-CodePudding

I am trying to create a grid template layout but a strange column gap keeps appearing on the rightmost side. How do I remove this?

I have included the link of the issue (see the extra column gap on the right) https://i.stack.imgur.com/pPKNU.png

Here is my HTML and CSS 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 {
  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 >
  <div >
    <div  style="background-image: url(images/img-1);"></div>
    <div  style="background-image: url(images/img-2);"></div>
    <div  style="background-image: url(images/img-3);"></div>
  </div>
</div>

CodePudding user response：

I tried that by an image address from myself and it works fine. Doesn't exist an Unwanted gap in the rightmost column. I also removed some codes that you don't need to them in your code (They have been commented):

.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 >
  <div >
    <div  style="background-image: url('https://s4.uupload.ir/files/1-6-5_ssnb.jpg');"></div>
    <div  style="background-image: url('https://s4.uupload.ir/files/1-6-5_ssnb.jpg');"></div>
    <div  style="background-image: url('https://s4.uupload.ir/files/1-6-5_ssnb.jpg');"></div>
  </div>
</div>

CodePudding user response：

I checked your code and I couldn't found any issue.

please check the below code.


<!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 >
        <div >
          <div  style="background-color: red;"></div>
          <div  style="background-color: green;"></div>
          <div  style="background-color: yellow;"></div>
        </div>
      </div>
</body>
</html>