CSS FLEXBOX E CSS GRID

São tecnologias para criação de interfaces responsivas.
As duas tecnologias trabalham com o conceito de containers que encapsulam itens.

CSS Flexbox

Tem flex containers que encapsulam flex itens.

CSS Grids

Tem grids containers que encapsulam itens.

A diferença que no css flexbox é feita de forma unidirecional(em uma única direção).
Isto dá uma certa dificuldade para trabalhar com layouts, estrutura de página. Ele é muito bom quando está trabalhando com componentes, interfaces de usuários.
No css grid a distribuição dos elementos é feita de forma bidirecional.
Os grids itens são dispostas dentro do container, criando posições específicas, fatiando o container.
Com css grid temos facilidade de trabalhar com layouts de uma interface. A desvantagem do css grid é que quando elementos de UI possam crescer, pois no css grid elementos tem posições específicas.

UTILIDADE DE USAR CSS GRID

Quando nós queremos colocar os elementos em posições pré-definidas na interface. Ele é ótimo quando queremos definir partes, fatiar para criação de layouts, partes na interface digital.

UTILIDADE DE USAR CSS FLEXBOX

É a melhor opção quando estamos trabalhando com componentes de U.I. Sempre quando temos uma quantidade dinâmica de elementos relacionados a um componente de UI, neste caso o FLEXBOX é a melhor opção.