Почему неправильно работает isotop/masonry с картинками?

Question

[Артур]

Изначально мне нужно сделать вот так:
Задача:
1) расположить картинки так, как показано изначально;
2) при изменении масштаба страницы одновременно уменьшать изображения с сохранением 100%;
3) эффект hover при наведении мышки на картинки.

Я подключил jquery-3.4.1.min.js, imagesloaded.pkgd.js, isotope.pkgd.min.js и в моём файле main.js прописал функцию:

var $grid = $('.grid').imagesLoaded( function() {
            // init Isotope after all images have loaded
            $grid.isotope({
                layoutMode: 'fitRows',
                itemSelector: '.grid-item',
                percentPosition: true,
                masonry: {
                    columnWidth: '.grid-sizer'
                }
            });
        });

Получилось так (неправильно):


При уменьшении страницы браузера получилось так (изображения сохраняют 100% вид):


Что я делаю не так? Может что лишнее прописал в SCSS? Все картинки у меня указаны без размеров. В CodePen я указал фиксированную ширину и высоту.

Попытался код отобразить в CodePen, получилось немного криво: https://codepen.io/aptyyyp/pen/RmBpom

Comments

[Flying]

Эта задача довольно просто (с поправкой на IE) решается на CSS grid, возможно вам стоит рассмотреть этот вариант?

[Артур]

Flying, Изначально я пробовал через Grid расположить картинки, расположил. Но как только я подключил isotop, эти картинки съехали.

[Flying]

Артур isotope, очевидно, не умеет работать с CSS grids. Вам нужна сортировка / фильтрация которую он предоставляет? Если да - то моё предложение по поводу CSS grid было, конечно же, неверным. Я, правда, не очень понимаю как представленный вами layout должен вести себя при сортировке с помощью isotope. Возможно стоит раскрыть задачу более полно?

[Артур]

Flying, Мне нужна сортировка, когда уменьшается экран, то картинки, которые не вмещаются по ширине, плавно переезжали вниз с новой строчки. Я бы мог сделать через запросы @ media в css, но плавный эффект перехода картинок теряется.

Вот я хочу совместить изначально правильное расположение картинок вместе с isotop. Возможно ли такое, или isotop всё таки конфликтует с CSS.

[Flying]

Артур смею предположить что вы просто не совсем правильно формулируете задачу для самого себя.

Попробуйте в качестве эксперимента взять какой-нибудь графический редактор, сделать там canvas такого же размера как на вашей картинке, закинуть туда ваши картинки и попробовать расставить их "правильно". Дальше постарайтесь сформулировать для себя ответ на вопрос каковы были правила этой "правильной" расстановки которую вы создали. После этого попробуйте изменить размер canvas'а и, используя те же правила повторить расстановку, проверьте что ваше предположение о правилах расстановки верное. Повторив подобную манипуляцию несколько раз вы, уверен, придёте к более полному пониманию того что же вы хотите получить в результате.

Могу сделать предположение о том что вы в результате придёте к пониманию того что ваша задача не имеет решения в заданных вами условиях и надо либо менять условия либо цель.

[Артур]

Если скрыть 3-ий блок с фоном ( &:nth-child(3) ), то расстановка картинок правильная. Проблема именно с 3-им блоком. Может размер картинки или блока нужно изменить.