以 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;
}