NEED CSS GRID HELP

[2.539]

Ok so basically I wanna do a photo gallery type of thing, on mobile it looks fine but on Ipad between the 2 columns theres a white space even tho I've not specified any gap rules here is my code any bit of help is more then helpful thanks to everyone
 

Code:

 

 
[code]
<div class="box"> <div class="box-one"><img src="https://source.unsplash.com/collection/190727/800x600?1" alt="Image"></div><div class="box-one"><img src="https://source.unsplash.com/collection/190727/800x600?2" alt="Image"></div><div class="box-one"><img src="https://source.unsplash.com/collection/190727/800x600?3" alt="Image"></div><div class="box-one"><img src="https://source.unsplash.com/collection/190727/800x600?4" alt="Image"></div><div class="box-one"><img src="https://source.unsplash.com/collection/190727/800x600?5" alt="Image"></div><div class="box-one"><img src="https://source.unsplash.com/collection/190727/800x600?6" alt="Image"></div><div class="box-one"><img src="https://source.unsplash.com/collection/190727/800x600?7" alt="Image"></div><div class="box-one"><img src="https://source.unsplash.com/collection/190727/800x600?8" alt="Image"></div><div class="box-one"><img src="https://source.unsplash.com/collection/190727/800x600?9" alt="Image"></div> </div>

[/code]

Code:

 

 
[code]
.box-one { width: 150px; height: 100px; } img { max-height: 100%; max-width: 100%; border-radius: 2px; } .box { display: grid; grid-template: repeat(9, 100px) / repeat(1, 150px); row-gap: 5px; justify-content: center; margin-top: 30px; } @media screen and (min-width: 768px) { .box-one { width: 150px; height: 100px; } img { max-width: 100%; max-height: 100%; } .box { display: grid; grid-template: repeat(5, 100px) / repeat(2, 150px); justify-items: center; } }

[/code]

[81]

You may have already fixed this but here:
 

Code:

 
.box {
  display: grid;
  grid-template: repeat(5, 100px) / repeat(2, 150px);
  justify-content: center;
  row-gap: 5px;
  margin: 30px 0;
}
.box-one {
  height: 100px;
  width: 150px;
}
img {
  height: 100px;
  width: 150px;
  border-radius: 2px;
}
@media (max-width: 768px) {
  .box {
    grid-template: repeat(9, 100px) / repeat(1, 150px);
  }
}

Road to Contributor - Likes Requirement: 366 / 499