SelenIT3

Такое свойство есть — display: contents. Но обязательно тестируйте решения с ним на доступность, с ним бывают сюрпризы. Хотя конкретно в вашем случае проблем быть не должно.

На макете видна именно сетка, которая напрямую переносится (и просится) в CSS Grid. Причем такая, с которой справится и старая версия гридов, которая есть в IE10+ — с явной привязкой каждого элемента к конкретной области.

Как вариант, сделать 2 вложенных анимации. Сам объект двигать вверх-вниз с замедлением движения в середине, а контейнер с этой анимацией двигать линейно по горизонтали. Но насколько это будет эффективно — надо тестировать.

Смотрите по задаче и предполагаемой аудитории. Если аудитория — чисто гики с новыми браузерами, то смело делайте на гридах с фолбэком на одноколоночный мобильный вариант (как советуют здесь). Если для широкой аудитории с пренебрежимой долей IE9- — делайте на флексбоксах. Если для госконторы, Китая или еще какой-то специфической аудитории с большой долей старых IE — лучше перестраховаться и сделать на флоатах. Но это именно исключение, для типичных случаев флексбоксы сегодня — золотая середина.

P.S. Всё вышесказанное — именно про раскладку блоков страницы. По прямому назначению (обтекание элементов текстом внутри блоков) флоаты по-прежнему актуальны (особенно в сочетании с новыми возможностями типа shape-outside).