Я использую framework7:
<div class="row">
<div class="col-33">
<img data-src="http://placehold.jp/24/333333/ffffff/600x900.png?text=23" class="lazy lazy-fade-in w-100-img">
</div>
<div class="col-33">
<img data-src="http://placehold.jp/24/333333/ffffff/600x500.png?text=23" class="lazy lazy-fade-in w-100-img">
</div>
<div class="col-33">
<img data-src="http://placehold.jp/24/333333/ffffff/600x900.png?text=23" class="lazy lazy-fade-in w-100-img">
</div>
<div class="col-33">
<img data-src="http://placehold.jp/24/333333/ffffff/600x900.png?text=23" class="lazy lazy-fade-in w-100-img">
</div>
<div class="col-33">
<img data-src="http://placehold.jp/24/333333/ffffff/600x900.png?text=23">
</div>
<div class="col-33">
<img data-src="http://placehold.jp/24/333333/ffffff/600x900.png?text=23" class="lazy lazy-fade-in w-100-img">
</div>
</div>
</div>
Получаю результат
Как удалить смещение блоков, отмеченные красной линией?
css:
.row {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
--f7-cols-per-row: 1;
}
.row > [class*="col-"], .row > .col {
box-sizing: border-box;
width: calc((100% - var(--f7-grid-gap) * (var(--f7-cols-per-row) - 1)) / var(--f7-cols-per-row));
}
.row .col-33 {
--f7-cols-per-row: 3;
}