[Dúvida] grid x flex

O uso de display: flex e display: grid depende das necessidades específicas do layout que você está tentando criar. Ambas as propriedades são poderosas, mas são mais adequadas para diferentes situações.

display: flex é ideal para criar layouts unidimensionais, ou seja, para organizar elementos em uma única linha (flex container) ou em uma única coluna. Isso é útil quando você deseja alinhar itens horizontalmente ou verticalmente.

Por outro lado, display: grid é uma solução bidimensional que permite criar layouts mais complexos, organizando elementos em linhas e colunas. Com o grid, você pode criar layouts mais estruturados e controlar o posicionamento de elementos de maneira mais flexível.

No exemplo específico que você mencionou, a instrutora pode ter escolhido display: grid porque o layout envolvia uma estrutura mais complexa, com elementos posicionados em linhas e colunas de maneira mais precisa. O grid permite um controle mais granular sobre o posicionamento dos elementos.

Você pode realizar muitos layouts com ambos, display: flex e display: grid, mas a escolha depende das características específicas do seu design. Se o seu layout é mais linear, display: flex pode ser suficiente. Se você precisa de uma estrutura mais complexa e organizada, display: grid pode ser a escolha mais apropriada.

A instrutora pode ter escolhido display: grid porque, para o layout específico que ela estava criando, o grid oferecia mais facilidade e flexibilidade. Ambas as abordagens têm seus casos de uso e não há uma resposta única para quando usar uma sobre a outra, mas sim uma escolha baseada nas necessidades específicas do projeto.

Espero que tenha entendido.