Я хочу сделать так, чтобы 3 колонка ужималась точно также, как и 2, но из-за отсутствия элемента, 3-я колонка не ужимается, как это можно сделать?
.container {
max-width: 1200px;
margin: 0 auto;
}
.posts {
display: flex;
flex-wrap: wrap;
}
.posts__item {
box-sizing: border-box;
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc((100% / 3) - 60px);
max-width: 413.33px;
margin-left: 30px;
margin-top: 50px;
}
.posts__item:first-child {
flex-basis: calc((100% / 3) * 2 - 50px);
margin-left: 0;
max-width: none;
}
.posts__item:nth-child(3n+3) {
margin-left: 0;
}
.post {
height: 300px;
}
.post img {
width: 100%;
height: 100%;
}
<div class="container">
<div class="posts">
<div class="post posts__item"><img src="https://picsum.photos/1000/500" alt=""></div>
<div class="post posts__item"><img src="https://picsum.photos/750/750" alt=""></div>
<div class="post posts__item"><img src="https://picsum.photos/250/250" alt=""></div>
<div class="post posts__item"><img src="https://picsum.photos/250/250" alt=""></div>
<div class="post posts__item"><img src="https://picsum.photos/250/250" alt=""></div>
<div class="post posts__item"><img src="https://picsum.photos/500/500" alt=""></div>
<div class="post posts__item"><img src="https://picsum.photos/500/500" alt=""></div>
</div>
</div>
Пример, как должно выглядеть, сайт wptavern . com
Если через DevTools удалить элемент, то при сжатии все элементы также ужимаются, но это сделано на гридах