Disposez les images dans une disposition 2x1x2x1x2

Question

Je souhaite aligner les images dans un format de grille 2x1x2x1x2 comme indiqué sur l'image, mais les images se répètent et je n'arrive pas à comprendre comment les obtenir comme ça. Je ne connais pas très bien le fonctionnement des grilles et je n'arrive pas à le comprendre. Je les ai rendus flexibles et j'ai un peu gâché la position : définitivement et tout, mais ils sont soit envoyés tout en haut de ma page, là où se trouvent ma navigation et tout ça. Pour autant que je l'ai actuellement, toutes les images sont collées les unes aux autres, ce qui est bien, mais ce n'est que dans une seule colonne.

Le code ci-dessous continue avec plus d'images dans le même format.

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>

Comme je l'ai dit, j'ai joué avec certaines options comme les valeurs flottantes, l'échelle élastique, mais je n'arrive pas à comprendre comment cela fonctionne. J'ai cherché sur Internet mais soit je ne comprends pas très bien, soit cela ne semble pas fonctionner. J'espère que quelqu'un pourra m'aider

Answer 1

C'est facile à faire en utilisant une grille. J'ai donné un exemple ci-dessous et commenté chaque partie pertinente pour expliquer son fonctionnement.

De plus, chaque attribut d'identifiant doit être unique.

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