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