Подскажите пожалуйста, как можно реализовать кладку monosory в три колонки из изображений разного размера, но чтобы первый и третий столбец были ниже среднего столбца на css grid или flex. И чтобы содержимое внутреннего контейнера обрезалось по размеру внешнего контейнера.
<div class="container">
<div class="picture-container">
<div class="picture-inner-container">
<div class="item" style="height: 140px"></div>
<div class="item" style="height: 190px"></div>
<div class="item" style="height: 170px"></div>
<div class="item" style="height: 120px"></div>
<div class="item" style="height: 160px"></div>
<div class="item" style="height: 180px"></div>
<div class="item" style="height: 140px"></div>
<div class="item" style="height: 150px"></div>
<div class="item" style="height: 170px"></div>
<div class="item" style="height: 170px"></div>
<div class="item" style="height: 160px"></div>
<div class="item" style="height: 180px"></div>
<div class="item" style="height: 140px"></div>
<div class="item" style="height: 150px"></div>
<div class="item" style="height: 170px"></div>
<div class="item" style="height: 170px"></div>
</div>
</div>
</div>
.picture-container {
overflow-y: hidden;
height: 1800px;
position: relative;
margin: 0 auto;
width:1440px;
}
.picture-inner-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 30px 24px;
max-width: 1440px;
width: 100%;
height: 1000px;
}
.item {
display: block;
object-fit: cover;
}
.item:nth-child(3n + 1) {
position: relative;
top: 50px;
}
.item:nth-child(3n + 3) {
position: relative;
top: 50px;
}
.item {
width: 32%;
position: relative;
margin-bottom: 2%;
border-radius: 3px;
background-color: #a1cbfa;
border: 1px solid #4290e2;
box-shadow: 0 2px 2px rgba(0,90,250,0.05),
0 4px 4px rgba(0,90,250,0.05),
0 8px 8px rgba(0,90,250,0.05),
0 16px 16px rgba(0,90,250,0.05);
color: #fff;
padding: 15px;
box-sizing: border-box;
}