具有 padding/margin 和相同纵横比的特殊 CSS (Flex)Grid

Question

大家好，平时我很擅长CSS，但这已经达到我的极限了。

我想制作一个网格，其中元素始终具有相同的纵横比（是的，图像本身确实都具有相同的纵横比）并且它们之间有填充或边距。

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

所以简而言之就是：

图片 1 必须是 2 的两倍
所有图片的宽高比必须相同
图片之间的距离应为 30px
移动设备它们应该相互重叠并且宽度为 100%（但这没问题）

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

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

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

有人已经这样做过并且知道如何解决这个问题吗？

Answer 1

picture 1 have to be twice as big as 2

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

all pics have to have the same aspect ratio

这是不可能的，因为一张大图片的高度不能与两张具有相同纵横比 + 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

上的相同代码

具有 padding/margin 和相同纵横比的特殊 CSS (Flex)Grid

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

css

aspect-ratio

flexbox

css-grid

结果