Solucionado
Na primeira seção podemos ver que foi colocado todos os itens em uma unica div, foi realizado o grid e houve a separação em colunas, mas na segunda seção a tag img é separada da div e mesmo assim é feito a separação do grid em 2 colunas, como isso ocorre? fiquei confuso.
Oi Bruno. Tudo bem?
Quando você define um elemento como um container de grid (por exemplo, com display: grid;), todos os elementos filhos diretos desse container se tornam itens de grid. Isso significa que eles serão automaticamente posicionados em colunas ou linhas, dependendo de como você configurou seu grid.
No caso do seu exemplo, na primeira seção, todos os itens estão dentro de uma única div, então eles são filhos diretos dessa div e, portanto, tornam-se itens de grid. Isso significa que eles serão organizados em colunas ou linhas, conforme definido nas regras de grid do CSS.
Na segunda seção, a tag img é separada da div. Isso significa que a tag img e a div são filhos diretos do container de grid. Portanto, eles serão organizados em colunas ou linhas, assim como na primeira seção.
A diferença é que, na segunda seção, a div contém outros elementos. No entanto, esses elementos não são filhos diretos do container de grid, então eles não se tornam itens de grid. Em vez disso, eles são tratados como parte de um único item de grid (a div), e são organizados de acordo com as regras de CSS aplicadas à div, e não ao container de grid.
Um abraço e bons estudos.