Специальная CSS (Flex) Grid с отступом / полем и таким же соотношением сторон

Question

Привет, ребята, как обычно, я довольно хорошо разбираюсь в CSS, но это достигает моего предела.

Я хочу создать сетку, в которой элементы всегда имеют одинаковое соотношение сторон (да, сами изображения имеют одинаковый аспектсоотношение) и которые имеют отступы или поля между ними.

Звучит легко, но я хочу, чтобы это выглядело так:

Короче говоря, это означает:

1. изображение 1 должно быть в два раза больше 2
2. все изображения должны иметь одинаковое соотношение сторон
3. расстояние между изображениями должно быть 30px
4. мобилу, все они должны быть без привязки друг к другу и на 100% ширины (но это не проблема).

   Также это должно работать для всех размеров экрана. Так что это должно зависеть от ширины экрана или ширины контейнера.

   Я попробовал это с flex и flex-grid, но безуспешно.

   Кто-нибудь уже сделал это и знает, как решитьэто?

Answer 1

рисунок 1 должен быть в два раза больше, чем 2

Я думаю, что это правило можно соблюдать только частично.

все изображения должны иметь одинаковое соотношение сторон

Это невозможно, поскольку большое изображение не может быть равным по высоте двум меньшим изображениям с одинаковым соотношением сторонРазрыв + 30px.

Результат

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.item {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
  font-weight: 700;
  color: #FF0000;
  background: #333333;
}

.item--big {
  grid-column: span 2;
  grid-row: span 2;
}

.item--right {
  grid-column-end: -1;
}

.item__inner {
  height: 0;
  padding-bottom: 50%;
}

.item__content {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

@media (max-width: 750px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .item--big {
    grid-column: span 1;
    grid-row: span 1;
  }
}

<ul class="grid">
  <li class="item item--big">
    <div class="item__inner">
      <img class="item__content" src="https://picsum.photos/536/354">
    </div>
  </li>
  <li class="item">
    <div class="item__inner">
      <img class="item__content" src="https://picsum.photos/536/354">
    </div>
  </li>
  <li class="item">
    <div class="item__inner">
      <img class="item__content" src="https://picsum.photos/536/354">
    </div>
  </li>
  <li class="item item--big item--right">
    <div class="item__inner">
      <img class="item__content" src="https://picsum.photos/536/354">
    </div>
  </li>
  <li class="item">
    <div class="item__inner">
      <img class="item__content" src="https://picsum.photos/536/354">
    </div>
  </li>
  <li class="item">
    <div class="item__inner">
      <img class="item__content" src="https://picsum.photos/536/354">
    </div>
  </li>
</ul>

И тот же код на CodePen