具有填充/边距和相同长宽比的特殊CSS（Flex）Grid

Question

大家好，我在CSS方面相当出色，但这已经达到了极限。

我想创建一个网格，其中Elements始终具有相同的长宽比（是的，图像本身确实具有相同的长宽比），并且它们之间具有填充或边距。

听起来很简单，但我希望它看起来像这样：

所以简而言之意味着：

1. 图片1的大小必须是2的两倍
2. 所有图片必须具有相同的长宽比
3. 图片之间的距离应为30px
4. 移动它们时，它们应该彼此不变形，且宽度为100％（但这没问题）

我设法使它看起来与我想要的东西非常相似，但从未完全达到它。

这也应该适用于所有屏幕尺寸。因此，应取决于屏幕宽度或容器宽度。

我用flex和flex-grid尝试过，但是没有成功。

任何人都已经做到了，知道如何解决吗？

Answer 1

  

图片1的大小必须是2的两倍

我认为该规则只能部分遵守。

  

所有图片必须具有相同的长宽比

这是不可能的，因为大图像的高度不能等于两个相同宽高比+ 30像素间距的小图像。

结果

.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

上的相同代码