Adding two sets of Grid-Gaps

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

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;
  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("") no-repeat 0 0;
  background-size: cover;
.container-top > * {width:424px;background:red;}

.jacket-right {
  background: url("") 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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.