I want to align the images in a 2x1x2x1x2 grid format as shown in the picture, but then the images duplicate but I can't seem to figure out how to get them like this. I'm not very familiar with how grids work and can't seem to figure it out. I made them flexible and messed it up a little bit with position: definitely and stuff, but they're either sent all the way to the top of my page where my navigation and stuff is. As far as what I have now, all the images are glued to each other, which is fine, but it's only in one column.
The code below continues with more images in the same 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>
As I said, I've messed around with some options like float values, elastic scale, but I can't seem to figure out how it works. I looked it up on the internet but I either don't quite understand it or it doesn't seem to work. Hope someone can help 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This can be easily done using a grid. I've given an example below and commented out each relevant part to explain how it works.
Additionally, each id attribute should be 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; }