Как поправить Grid элементы?

Question

[Игорь Ламп]

Как поправить данный казус?? Правая картинка должна стоять в параллель со всеми

JSFIDDLE

<section class="gallery">
      <div class="gallery__wrap">
        <div class="gallery__item gallery__item--1">
          <img src="/img/galery_footer/1.jpg" class="gallery__img" alt="" />
        </div>
        <div class="gallery__item gallery__item--2">
          <img src="/img/galery_footer/2.jpg" class="gallery__img" alt="" />
        </div>
        <div class="gallery__item gallery__item--3">
          <img src="/img/galery_footer/3.jpg" class="gallery__img" alt="" />
        </div>
        <div class="gallery__item gallery__item--4">
          <img src="/img/galery_footer/4.jpg" class="gallery__img" alt="" />
        </div>
      </div>
    </section>

.gallery {
  display: flex;

  &__wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    height: 100%;
  }
  &__item{
    display: flex;
    width: 100%;
    img{
      width: 100%;
    }
  }

  &__item--3{
    grid-column: span 2 / auto;
  }
  &__item--4{
    grid-row: span 2 / auto;
  }
}

Comments

[Михаил]

выложите на jsfiddle

[Игорь Ламп]

Михаил, https://jsfiddle.net/54ypcrab/4/

[Максим]

Игорь Ламп, https://codepen.io/topicstarter/pen/ExaJBZN так ?

[Игорь Ламп]

осилил))
немного не так вот как хотел и таки смог

[Максим]

Игорь Ламп, https://codepen.io/topicstarter/pen/ExaJBZN - наверно так надо было -

Answer 1

[Natalia ivanova]

Если я правильно поняла вопрос, то правая картинка будет на месте, когда будет так

.gallery__item--4 {
    grid-column: span 2 / auto;
}

,
вместо

.gallery__item--4 {
    grid-row: span 2 / auto;
}