Susun imej dalam reka letak 2x1x2x1x2

Question

Saya ingin menjajarkan imej dalam format grid 2x1x2x1x2 seperti yang ditunjukkan dalam gambar, tetapi kemudian imej itu berulang dan saya tidak dapat memikirkan cara untuk mendapatkannya seperti ini. Saya tidak begitu biasa dengan cara grid berfungsi dan nampaknya tidak dapat memahaminya. Saya menjadikannya fleksibel dan mengacaukannya sedikit dengan kedudukan: pasti dan lain-lain, tetapi mereka sama ada dihantar ke bahagian atas halaman saya di mana navigasi dan barangan saya berada. Setakat apa yang saya ada sekarang, semua imej dilekatkan antara satu sama lain, yang baik, tetapi ia hanya dalam satu lajur.

Kod di bawah diteruskan dengan lebih banyak imej dalam format yang sama.

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>

Seperti yang saya katakan, saya telah mengacaukan beberapa pilihan seperti nilai apungan, skala elastik, tetapi saya tidak dapat memikirkan cara ia berfungsi. Saya mencarinya di internet tetapi saya tidak begitu faham atau nampaknya tidak berkesan. Harap ada yang boleh membantu

Answer 1

Ini mudah dilakukan menggunakan grid. Saya telah memberikan contoh di bawah dan mengulas setiap bahagian yang berkaitan untuk menerangkan cara ia berfungsi.

Selain itu, setiap atribut id hendaklah unik.

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