Как сверстать такой блок?

Question

[LastGeneral]

<ul class="principle">
  <li class="principle__item principle__img"></li>
  <li class="principle__item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et nam repellat a aspernatur velit ipsam vitae neque similique excepturi. Consequatur dolores temporibus, odio nam iusto nostrum voluptatem quo numquam! Quia modi, blanditiis totam dolorum, laborum velit mollitia non iusto numquam quam libero id eos impedit ratione quisquam maxime facere illum.</li>
  <li class="principle__item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et nam repellat a aspernatur velit ipsam vitae neque similique excepturi. Consequatur dolores temporibus, odio nam iusto nostrum voluptatem quo numquam! Quia modi, blanditiis totam dolorum, laborum velit mollitia non iusto numquam quam libero id eos impedit ratione quisquam maxime facere illum.</li>
  <li class="principle__item principle__img"></li>
  <li class="principle__item principle__img"></li>
  <li class="principle__item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et nam repellat a aspernatur velit ipsam vitae neque similique excepturi. Consequatur dolores temporibus, odio nam iusto nostrum voluptatem quo numquam! Quia modi, blanditiis totam dolorum, laborum velit mollitia non iusto numquam quam libero id eos impedit ratione quisquam maxime facere illum.</li>
  <li class="principle__item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et nam repellat a aspernatur velit ipsam vitae neque similique excepturi. Consequatur dolores temporibus, odio nam iusto nostrum voluptatem quo numquam! Quia modi, blanditiis totam dolorum, laborum velit mollitia non iusto numquam quam libero id eos impedit ratione quisquam maxime facere illum.</li>
  <li class="principle__item principle__img"></li>
</ul>

.principle {
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin: 0;
  padding: 0;
  &__item {
    &:nth-child(1) {
      grid-row: 1/3;
      grid-column: 1;
    }
    &:nth-child(2) {
      grid-row: 1;
      grid-column: 2;
    }
    &:nth-child(3) {
      grid-row: 3;
      grid-column: 1;
    }
    &:nth-child(4) {
      grid-row: 2/4;
      grid-column: 2;
    }
    &:nth-child(5) {
      grid-row: 4/6;
      grid-column: 1;
    }
    &:nth-child(6) {
      grid-row: 4;
      grid-column: 2;
    }
    &:nth-child(7) {
      grid-row: 6;
      grid-column: 1;
    }
    &:nth-child(8) {
      grid-row: 6/8;
      grid-column: 2;
    }
  }
  &__img {
    height: 500px;
    background-image: url(https://w7.pngwing.com/pngs/166/408/png-transparent-feature-phone-smartphone-mobile-phone-accessories-pda-smartphone-gadget-electronics-mobile-phone-thumbnail.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
  &__text {
    display: flex;
    align-items: center;
    height: 250px;
  }
}

Answer 1

[Александр Цымбал]

Зачем вам grid на ровном месте? :)
Используйте у картинок отрицательные margin сверху и снизу, чтобы блоки как-бы "наслаивались" друг на друга немного. В остальном всё просто.
https://codepen.io/tsymbal_su/pen/dymWpLp - вот концепция для понимания. остальное сами, надеюсь, додумаете.