Special CSS (Flex)Grid with padding/margin and same aspect ratio

Question

Hi guys normaly I'm pretty good at CSS but this reaches my limit.

I want to make a grid which Elements always have the same aspect ratio (yes the images itself does all have the same aspect ratio) and which have a padding or margin between them.

Sounds easy but I want it to look like that:

So in short it means:

1. picture 1 have to be twice as big as 2
2. all pics have to have the same aspect ratio
3. distance between the pictures should be 30px
4. mobile they should all be unter each other and on 100% width (but this was no problem)

I managed it to make it look pretty similar to what I want but never reached it exactly.

Also this should work for every screensizes. So it should be depending on the screen-width or container-width.

I tried it with flex and flex-grid but did not succeed.

Anyone already did this and knows how to solve this?

Answer 1

picture 1 have to be twice as big as 2

I think this rule can only be partially observed.

all pics have to have the same aspect ratio

This is not possible, since a large image cannot be equal in height to two smaller images with the same aspect ratio + 30px gap.

Result

.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>

And same code on CodePen