Резонно ли использовать display:flex, display:grid? В чем реальное отличие gird от flex?

Если вы не видите отличий, значит вы не знаете, что такое flexbox и grid'ы. Уж простите. Разница в построении разметки, ну просто колоссальная.

При помощи гридов, базовую разметку всей страницы можно построить буквально парой строк css. Flexbox вам такого не даст. Как я вижу, то flexbox призван решить проблемы построения разметки через float'ы + добавить фишек сверху.

grid'ы призваны решить проблему и того и другого + добавить фишек сверху. Но гриды это не замена flexbox. Их можно и нужно использовать вместе.

Пример такой: есть всем известная масонри сетка, щас, её вручную, при помощи flexbox сделать нельзя, а вот при помощи гридов раз плюнуть. Чуете разницу?

В итоге, flexbox можно уже использовать. Я юзаю уже полгода, написал себе сетку, которая ну просто чудесная и удобная. Гриды я бы не стал юзать еще около года, полтора. Но изучать можно уже сейчас.

Flexbox и Grid это не два противоборствующих свойства, они наоборот дополняют друг друга.
Grid - инструмент позиционирования основных блоков страницы.
Flexbox - инструмент позиционирования элементов внутри блоков, спозиционированных с помощью Grid.

GMD - пример сетки на flexbox, которую мы с командой используем и которую я сам написал.

Причина использовать только флексбокс.
Причина пользоваться библиотекой Masonry, ссылку на которую уже скинули (Только из-за плохой поддерживаемости браузерами. Надобность во фреймворках отпадёт со временем)