Adding two sets of Grid-Gaps

I would change it to this.
grid-template-columns: 442px 442px;

https://jsfiddle.net/jytvf9se/1/

It’s a bit awkward because you are defining tracks that hold variable width content but you could size the grid item like this.

.container-top {
  display: grid;
  justify-content:space-evenly;
  justify-items:center;
  align-items: center;
  grid-template-columns:424px 424px;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  overflow: hidden;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}
.container-top > * {width:424px;background:red;}

.jacket-left,
.jacket-right {
  background: url("https://i.imgur.com/fzdYu8g.jpg") no-repeat 0 0;
  background-size: 100% 200%;
  margin:auto;/* will center smaller jacket */
}

.jacket-left {
  position: relative;
  width: 80px;
  height: 80px;

}

If that’s what your desired result is then that’s what it should be:)

1 Like