Sim meu amigo é perfeitamente viável usar display:grid
e display:flex
no mesmo projeto. Principalmente pelas particularidades de cada um. Falando a grosso modo o Grid
vc pode usar mais para montar a estrutura de layout da página e o flex
para construir os "componente" dentro desses blocos de layout do grid.
O Grid
leva vantagem na hora de construir os layouts da página, pois ele oferece a possibilidade de trabalhar expandindo os espaços na vertical e na horizontal. Já o flex-box
só ocupa os espaços no eixo X
(apesar de que com "jeitinhos" vc pode contornar isso, mas não é a opção indicada, principalmente tendo o grid
disponível)
Para entender melhor veja essas duas imagem. No Flex os componentes seguem apenas um eixo, ou X ou Y, e no Grid os dois estão disponíveis aos mesmo tempo!


Agora vou te dar alguns exemplos práticos. Vou montar a mesma estrutura com Flex
e depois com Grid
, repare como com Flex
são necessárias mais linhas de código e a estrutura se torana menos semântica.
Exemplo com FLEX
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section, header, aside, main, article, footer {
border: 1px solid;
min-height: 80px;
}
section {
display: flex;
flex-wrap: wrap;
}
header, footer {
width: 100%;
}
aside {
width: 30%;
}
main {
width: 70%;
display: flex;
flex-direction: column;
border: 1px solid red;
}
article {
width: 100%;
}
<section>
<header>header</header>
<aside>aside</aside>
<main>
<article>artivle</article>
<article>article</article>
</main>
<footer>footer</footer>
</section>
Já com Grid
temos muito menos código, uma estrutura mais semântica e mais fácil de trabalhar a responsividade de cada container
caso deseje.
Exemplo com GRID
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: grid;
grid-template-areas:
"header header "
"aside main"
"footer footer ";
grid-template-rows: 1fr 4fr 1fr;
grid-template-columns: 1fr 2fr;
}
header, aside, main, article, footer {
border: 1px solid;
min-height: 30px;
}
header {
grid-area: header;
}
aside {
grid-area: aside;
}
main {
grid-area: main;
display: grid;
border: 1px solid red;
}
footer {
grid-area: footer;
}
<header>header</header>
<aside>aside</aside>
<main>
<article>artivle</article>
<article>article</article>
</main>
<footer>footer</footer>
OBS1: Apesar de eu ter montados dos modelos eles poderia funcionar perfeitamente em conjunto, por exemplo, o <main>
pode ser display:flex
sem problema algum.
OBS2: Não fiz o tratamento responsivo nesses exemplos, são apenas modelos didáticos ok
Apesar do Grid
praticamente aceitar todas os atributos e estilos do Flex
existem algumas particularidades. E para mim a mais irritante delas é com relação a centralização de elementos no grid-template-columns
pro exemplo. Quando vc vai jogando os elementos pra linha de baixo vc não consegue centralizar o último elemento, isso acontece devido a estrutura do grid.
Veja a imagem e o exemplo de código:

.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) );
justify-content: center; /* não vai funcionar o alinhamento center*/
}
.box {
border:1px solid;
padding: 20px;
font-size: 150%;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">não centraliza</div>
</div>
O mesmo exemplo com Flex
com a opção de centralizar o último item:

.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
width: 25%;
box-sizing: border-box;
border:1px solid;
padding: 20px;
font-size: 100%;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">agora centraliza</div>
</div>
DICAS:
Leve sempre em consideração o suporte dos browser, e seu público alvo usa ou não um navegador que suporte esses tipos de display
https://caniuse.com/#search=flex
https://caniuse.com/#search=grid
E leia a documentação oficial, essa é da Mozilla, mas é bem completa e didática:
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout