Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Display grid e grid-area

Referente ao curso Praticando CSS: Grid e Flexbox, no capítulo Mergulhando no Grid e atividade Desafio: Grid da li da seção agenda

por Debora Mariano
| 30.2k xp | 13 posts
Orientadora de laboratório de ciências

Eu gostaria de saber se da maneira que fiz está incorreto para a section agenda, porque na resposta do professor do desafio está diferente. Entao nao sei quando qual é o método correto.

Jeito que eu fiz:

.agenda__item { display: grid; grid-template-rows: auto 1fr; grid-template-columns: repeat(2, 1fr); grid-template-areas: "imagem imagem" "data evento"; }

.agenda__item img { grid-area: imagem; }

.agenda__item h3 h4 h5 { grid-area: data; }

.agenda__item h6 button { grid-area: evento; }

Jeito que o professor fez:

.agenda__item { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto 1fr; }

.agenda__item img { grid-column: 1/ 3; }

1 resposta
por Gerson dos Reis de Melo
| 179.5k xp | 121 posts

Ambas as abordagens que você e o professor utilizaram podem ser válidas, dependendo do resultado desejado. No entanto, existem diferenças nas propriedades usadas em cada uma das abordagens.

Na sua abordagem, você está usando a propriedade grid-template-areas para definir as áreas do grid. Isso permite especificar o layout de uma maneira mais visual, atribuindo nomes às áreas e, em seguida, associando esses nomes aos elementos filhos. No entanto, é importante observar que você precisa ter os elementos corretamente aninhados dentro da estrutura do HTML para que o grid funcione corretamente com essa abordagem.

Na abordagem do professor, ele está usando a propriedade grid-column para definir as colunas que o elemento deve ocupar no grid. Com grid-column: 1/3;, o elemento de imagem está ocupando as duas colunas do grid. Essa abordagem é mais direta e não requer o uso da propriedade grid-template-areas.

Ambas as abordagens podem funcionar, mas é importante garantir que os elementos HTML estejam corretamente estruturados e que as propriedades CSS sejam aplicadas de acordo.

Para determinar qual abordagem é mais adequada para o seu caso específico, leve em consideração a estrutura do seu HTML, a flexibilidade que você deseja em relação ao posicionamento dos elementos e a compatibilidade com outros estilos e layouts existentes no seu projeto.