В каких случаях и что использовать и какие превосходства у них перед друг другом?
Гриды использовать когда есть нестандартная раскладка блоков, либо для быстрой типизации шаблона верстки:

Флексы использовать когда нужно расположить элементы по осям, горизонтальной или вертикальной, в 2 строки кода.
В итоге: обычно используется вместе, и один инструмент дополняет другой.