CSS сетка

Да нет там никакой сетки, потому и сбиваться нечему. Есть набор элементов single-recipe-type-box, у которых float left, а высота как получится, поэтому четвертый элемент спотыкается на ступеньке между вторым и третьим. А в файерфоксе - вообще свалка несусветная.

Как вам верно сказали ранее, у вас обычные float:left.

Проблема в том, что изображения при ресайзе получаются разной высоты (а именно выбивается третья). Как наиболее простой путь, сделайте изображения с одинаковым соотношением сторон (в вашем случае - квадратными)

Третья картинка у вас 640х639. Сделайте ее 640x640 или 639x639

А лучше перед выводом автоматически ресайзить и обрезать до квадрата, дабы избежать таких ситуаций

P.S. Но это костыль. Если что-то еще изменит высоту блока, то будет то же самое. Например, если где-то подпись под картинкой окажется в две строки.. Если такая перспектива не парит, то поправьте размер картинки и все

странно.. у меня в FF и в Chrome - нормально

Хром у меня новый - там всё нормально. А FF сравнительно старая версия, около года не обновлял - но сайт не должен терять таких пользователей, тематика там ведь на домохозяек рассчитана. Это ж не IE4, которого совсем не осталось.

UPD.

Косяк, который на картинке от ФФ, происходит от того, что у элемента a не указана ширина. Поэтому выбирая между шириной родительского блока и дочернего img, браузер выбрал ширину картинки.

сталкивался я с подобной хренью.

при некоторых (непонятных для меня) условиях, GD2 масштабирует и кропает картинку некорректно(бывает так, что две совершенно одинаковых картинки, только одна png а другая Jpeg имеют на выходе разные размеры) . вот и получается, что у вас часть 639, часть 640.

самый простой вариант. Задать жестко размеры для .single-recipe-type-image

/зы

по-моему, за манеру верстать через флоат уже давно пора кастрировать. По причине ошибки в генетическом коде верстальщика, дабы он не смог продолжить самокопирование. чай сейчас не 2007й и 6го ИЕ уже нигде нет

Не, жестко задават размеры нельзя

Вот с этим согласен =)

Спасибо!

inline-block юзать или что-то еще выдумали? А то я что-то совсм отстал от жизни... :)

Сейчас модно grid и, особенно, flexbox 🍿

Модно - это ещё не значит, что везде надо применять.

Ну да.

На мой взгляд гриды пока что все же более модно, а в флексы имеет смысл использовать на всю катушку, особенно в большинстве коммерческих проектов, их ЦА на IE8 не сидит. :)