Html Question posted in
Some basic documentation can be found here.

Html – Why is there a gap next to my CSS grid layout on some browsers?

I’m trying to use grids to display my pictures and make them cover the whole page while not changing aspect ratio. But when I open my page on Firefox or Chrome there’s a huge gap on the right side.

Disposition in VSC browser

Disposition in Firefox or Chrome

I tried :

  • setting margin: 0; in body
  • setting height, width, max-width in html and body
  • setting width: 100%; in container
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 350px 350px;
  gap: 2em;
  padding: 1em;
}

.photo {
  max-width: 100%;
  max-width: 100%;
  object-fit: cover;
}
<div class="container">
  <div>
    <img class="photo" src="Japon_content/000001_minia.jpeg">
  </div>

  <div>
    <img class="photo" src="Japon_content/000002_minia.jpg">
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed this by applying these styles to the photo class:

    .photo {
    width: 100%; 
    max-height: 100%;
    object-fit: cover;
}

  2. 0

    No, the gap is correct…

    .container {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  grid-template-rows    : 350px 350px;
  gap                   : 2em;
  padding               : 1em;
  }
.container div {             /* added to show real */
  background-color : yellow; /* grid element size  */
  }
.photo {
  max-width  : 100%;
  object-fit : cover;
  }
    <div class="container">
  <div>
    <img class="photo" src="https://picsum.photos/350/350?random=1">
  </div>
  
  <div>
    <img class="photo" src="https://picsum.photos/350/350?random=2">
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search