Dúvida do não uso do grid-template

Bom dia Israel, tudo bem?

Os comando grid-template-columns e grid-template-rows são utilizados no elemento pai para definir as colunas e linhas do grid. Do mesmo modo a propriedade grid-template-areas é utilizada no elemento pai para definir o template das áreas do grid. Todas estas propriedades podem ser definidas em uma única declaração utilizando o shorthand grid-template e criam a "planta-baixa" do grid, por assim dizer. Observe que todas essas propriedades são utilizadas no elemento pai.

Já os comandos grid-column, grid-row e grid-area são propriedades dos filhos. grid-column é o shorthand para grid-column-start + grid-column-end e grid-row é o shorthand para grid-row-start + grid-row-end. Estas propriedades são utilizadas para alocar o elemento filho em uma determinada posição dentro do grid que já foi definido através do template. Ou seja, você tem a "planta-baixa" do grid que foi definido com as propriedades do grid-template no elemento pai, e agora você está colocando cada elemento filho (ou grid item) individualmente no lugar que você quiser com o uso das propriedades grid-column e grid-row.

Tentando simplificar mais (e fazendo uma analogia com a construção de uma casa XD):

• Primeiro você define um container como sendo do tipo grid (ou seja, escolhe um terreno para construir a casa) e cria o template do grid (seria equivalente a definir as paredes da casa para ter vários cômodos).
• Agora que você tem um grid com células definidas (você tem do desenho de todos os cômodos da casa no chão do terreno) você pode começar a distribuir essas células entre cada elemento filho (o que significa que você pode escolher um cômodo e definir que ele vai ser ocupado pelo banheiro, e que o outro cômodo será a sala ou a cozinha).
• O container grid não se importa com a forma ou ordem que os filhos vão ocupar cada célula, ele se importa apenas em gerar e definir o próprio grid.
• Os elementos filhos encontram um grid pronto, e agora eles ocupam determinadas células de acordo as propriedades grid-column e grid-row que você utilizar neles.

Espero ter ajudado um pouco. Em todo o caso vale a pena dar uma olhada nesse guia do CSS-TRICKS, onde eles explicam cada propriedade grid e usam ilustrações para gente visualizar melhor: https://css-tricks.com/snippets/css/complete-guide-grid/

Também recomendo dar uma olhada no MDN. Segue o link para a parte sobre grid: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

oi beatriz, obrigado pela explicação consegui entender sim o que você explicou, o único ponto que tinha ficado em dúvida nesse curso foi porque na 2 aula não tinha sido feito a criação do grid-template e só foi usado o grid-column e o grid-row, por isso a dúvida como a coluna e linha poderia ser passado sem a base ou "planta" do grid, como o grid soube que foi criado 3 colunas e 2 linhas? Não sei se você conseguiu entender o que eu falei agora.

Oi Israel, acho que agora sim entendi a sua pergunta. Basicamente existem dois tipos de grids: o grid explícito e o grid implícito.

O grid explícito é o grid que a gente define manualmente através do grid-template (qlqr um deles). Quando usamos essa propriedade estamos definindo um número fixo de linhas e tracks no grid. Ao fazer isso os grid itens são distribuídos pelo grid mas, se a quantidade de itens exceder o total de células que foram criados, o container do grid automaticamente gera novas linhas e tracks para encaixar o conteúdo. Essas células geradas automaticamente, em conjunto com o grid explícito, é chamado de grid implícito.

Nesse exemplo da aula 2 foi criado um grid com 'display: grid;', porém não foram definidas células de modo explícito. Portanto o container gera automaticamente a quantidade de células necessárias para caber todos os grid itens. Os itens vão preencher as células criadas em ordem consecutiva. É possível utilizar as propriedades 'grid-row' e 'grid-column' para organizar cada item dentro do grid implícito. Esse é o conceito por trás dessa aula.

O uso do grid explícito através das propriedades 'grid-template' não é obrigatório, e você pode fazer seu layout utilizando apenas o grid implícito. Porém, uma das desvantagens de utilizar esse método é que ele pode tornar a compreensão do código difícil. Ou seja, não é errado utilizar esse método, mas deve ser usado com cautela.

Espero que dessa vez tenha conseguido responder sua dúvida :D.

Oi beatriz, sim agora eu acho que consegui entender, com o grid explícito passado pelos grid-template, nós criamos os "espaços" no qual os grid-itens iram ter para ocupar no grid-container, e a outra parte é o grid implícito que após colocamos um display-grid ele cria um grid porém sem definição de linhas e colunas, sendo assim podemos por os grid-itens passando grid-row e column dentro desse exemplo.

EX: display-grid: grid-row: 1/2 e grid-column: 1/2 - ele irá ocupar a linha 1 até a 2 e coluna 1 até a 2, mesmo nós não termos passado a propriedade grid-template ele irá automaticamente criar essas colunas e linhas, se for esse o entendimento muito obrigado conseguir pegar a ideia.