以 2x1x2x1x2 布局排列图像

Question

我想以 2x1x2x1x2 网格格式对齐图像，如图所示，但随后图像重复，但我似乎不知道如何像这样获得它们。我不太熟悉网格的工作原理，而且似乎无法弄清楚。我让它们变得灵活，并用位置：绝对和东西搞乱了一点，但它们要么一直发送到我的页面顶部，那里是我的导航和东西。就我现在所拥有的而言，所有图像都相互粘在一起，这很好，但它只在一列中。

下面的代码继续使用更多相同格式的图像。

img {
  width: 50%;
}

#img-layout {
  display: flex;
}

.img-lion {
  float: left;
}

.img-water {
  float: right;
}

<div class="container-images">
  <div class="img-lion" id="img-layout">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1459800606415-5B8BDTCZ866H7OTNQMYL/portrait-black.jpg?format=1500w" alt="" />
  </div>
  <div class="img-water" id="img-layout">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1452896039354-F8P5FPCM3V9HMWHWZ0FE/main.jpg?format=1000w" alt="" />
  </div>
  <div class="img-pedestal" id="img-layout">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1456767403805-KN8Z62OADRLLPKN8YA4P/nytimes-main.jpg?format=1000w" alt="" />
  </div>
  <div class="img-berlin" id="img-layout">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1453940592760-5OWKFJCJKG133RHSDOMK/main.jpg?format=1000w" alt="" />
  </div>
  <div class="img-dome" id="img-layout">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1452634113588-M32DA4VU1QCEBLOKWCBV/main.jpg?format=1500w" alt="" />
  </div>
</div>

正如我所说，我已经搞乱了一些选项，例如浮点值、弹性比例，但我似乎无法弄清楚它是如何工作的。我在互联网上查了一下，但我要么不太理解它，要么它似乎不起作用。希望有人能帮忙

Answer 1

使用网格可以很容易地做到这一点。我在下面给出了一个示例，并对每个相关部分进行了注释，以解释其工作原理。

此外，每个 id 属性都应该是唯一的。

.container-images {
  /* set up a grid */
  display:grid;
  
  /* tell it that we want 2 columns and each column is equal width */
  grid-template-columns: repeat(2, 1fr);
}

img {
  /* make the image fill the entire container then clip the image as best the browser can to fill it */
  width: 100%;
  height:100%;
  object-fit: cover;
}

.container-images > div:nth-child(3n+3) {
  /* every 3rd element start the image at the left hand track but span the two columns */
  grid-column: 1 / span 2;
}