FLEX? | CSS: construindo layouts com Grid | Alura

só deixando a minha total quebra de expectativa aqui. sempre quando vai chegando pelo meio do curso, eu começo a tentar fazer sozinho, comparando com o fgima e evitando ao máximo ver os videos, só vejo os videos quando já batir cabeça e realmente não sei o que fazer. acontece que ouve muitas situações nesse curso onde poderia ser usado flex, mas já tinha percebido que isso não seria usado, porque o curso até então tinha sempre mostrado o uso do grid, o que faz todo sentido já que o curso é justamente sobre isso. então simplesmente estou eu tentando arrumar os elementos dentro do card com o grid, e não consigo, tento bastante e desisto, até penso, com o flex isso seria mais simples, mas o curso e de grid então deve ter uma forma. chego no video o cara do nada me manda um flex, um flex?. deixo aqui a minha pergunta indignado, tem alguma forma de fazer isso com o grid?

Olá Alef, como vai?

A escolha entre Flexbox e Grid realmente pode ser um pouco confusa, mas acredito que posso te ajudar a esclarecer isso.

A principal diferença entre Flexbox e Grid é que Flexbox é essencialmente para layout em uma única dimensão - linha ou coluna. Grid é para layout de duas dimensões - linhas e colunas ao mesmo tempo.

No seu caso, quando você estava tentando organizar os elementos dentro do card, parece que você estava lidando com um layout unidimensional (uma linha ou uma coluna). É por isso que o Flexbox, que é ótimo para esse tipo de situação, foi sugerido.

No entanto, você está absolutamente certo, também é possível fazer isso com o Grid. Para fazer isso, você teria que definir as linhas e colunas do grid e, em seguida, posicionar cada item do grid de acordo. Aqui está um exemplo de como você poderia fazer isso:

.card {
  display: grid;
  grid-template-rows: auto auto auto; /* cria 3 linhas */
}

.card img {
  grid-row: 1; /* posiciona a imagem na primeira linha */
}

.card h3 {
  grid-row: 2; /* posiciona o título na segunda linha */
}

.card h4 {
  grid-row: 3; /* posiciona o subtítulo na terceira linha */
}

Espero que isso esclareça um pouco as coisas para você. Lembre-se, não há necessariamente uma resposta certa ou errada aqui. Tanto o Flexbox quanto o Grid têm seus usos, e muitas vezes você vai querer usar os dois em diferentes partes do seu projeto, como foi feito no curso.

Espero ter ajudado e bons estudos!