Olá Noah, tudo bem?
Sobre as diferenças entre padding e margin, eu recomendo o estudo desse tópico que respondi, lá eu explico com muitos detalhes a diferença entre essas duas propriedades e também trago um exemplo prático.
O gap irá atuar de maneira semelhante ao margin, pois ele cria um espaçamento entre um elemento e outro. A principal diferença, é que o gap aplica esse espaço de uma vez só entre vários elementos que são irmãos, ou seja, fazem parte de um mesmo container/pai (div, ul etc) e por esse motivo, que o gap é uma propriedade que é aplicada diretamente nesse elemento pai. Um outra ponto, é que o gap só pode ser usado dentro de um contexto de Flex Container ou Grid Container.
Sobre o flex e o grid, no caso desse projeto também poderia ser utilizado flexbox pra solucionar o layout, mas o dois são ferramentas poderosas! Nesse caso, foi apenas preferência da instrutora.
Basicamente, o flexbox irá contribuir para posicionar elementos na página em apenas 1 sentido, ou na horizontal ou na vertical. Já o grid, irá dispor elementos na página em 1 sentido também (é o exemplo do projeto do curso), mas ele é capaz de posicionar elementos nos dois eixos simultaneamente, o x e o y.
Mas isso é uma definição resumida, tem muito a se explorar sobre as diferenças entre flex e grid e quando cabe utilizar cada um e é por isso que temos um curso específico disso, o Praticando CSS: Grid e Flexbox, talvez seja do seu interesse se matricular.
Espero ter ajudado, abraços e bons estudos!
