Fala aí Elías, tudo bem? Vamos lá, vou tentar:
as propriedades do layout Flexbox utilizadas nesta aula (display: flex, flex-wrap: wrap, etc) (não encontrei a explicação nos vídeos nem nas transcrições desta aula);
display: flex
: Vai transformar nossa Box em FlexBox, para que possamos utilizar as funcionalidades do FlexBox.flex-wrap: wrap
: Essa propriedade faz com que os elementos quebrem em novas linhas quando não couberem na mesma linha, exemplo:
Imagine uma linha com quatro caixas, cada uma com 25%, e um espaçamento externo de 30px, conforme a tela via diminuindo, eles vão ficar expremidos, com essa propriedade, eles vão quebrar em linhas.
o motivo de sua utilização, porque não foi utilizado o Grid Layout;
O motivo de usar FlexBox foi para mostrar que Grid Layout e FlexBox podem trabalhar juntos, muitas pessoas confundem achando que eles fazem a mesma coisa.
como ficaria o código substituindo flex por grid (se viável, do contrário favor explicar o motivo)
Basicamente trocaríamos o FlexBox por grid-template-areas
e posicionaríamos os elementos em cada area, assim como foi feito nas demais partes.
Obs: Realmente, talvez faça sentido o curso de FlexBox ser obrigatório para esse, vou adicionar.
Espero ter ajudado.