Os propósitos de flexbox
e Grid-layout
são diferentes.
Flexbox:
O foco dele é organizar os itens em linhas ou colunas, mas seguindo o sistema de "blocos", ou seja o conteúdo será vários retângulos, um ao lado do outro, ou sobre o outro.
Grid-layout:
Como o nome diz, faz um grid (grade), e serve para organizar seus itens de forma mais sofisticada, onde cada um tem um comportamento independente, ocupa um número de linhas e colunas que você estipula.
Exemplo de layout que precisei fazer:
A versão mobile era totalmente diferente dessa, mas foi muito fácil de converter, pois, como eu disse, cada item se comporta independente, logo eu só mudei a posição de cada um deles e foi mais fácil do que usar qualquer "gambiarra".
Problema do Grid-layout é a compatibilidade com IE, funciona somente na versão 11 e não muito bem, então uso uma biblioteca mixin SASS que gera para mim.
grid-layout-IE11