我想以 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>
正如我所說，我已經搞亂了一些選項，例如浮點值、彈性比例，但我似乎無法弄清楚它是如何運作的。我在網路上查了一下，但我要么不太理解它，要么它似乎不起作用。希望有人能幫忙 
使用網格可以輕鬆做到這一點。我在下面給出了一個示例，並對每個相關部分進行了註釋，以解釋其工作原理。
此外，每個 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; }