Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] [Dúvida] Minha solução e dúvida na solução proposta

Minha resolução ficou desta forma com o uso das grid-templeta-areas:

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

.agenda__item img {
    grid-area: imagem;
}

.agenda__informacoes {
    grid-area: informacoes;
}

.agenda__atracao {
    grid-area: atracao
}

O que me deixou com dúvida foi este trecho:

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

Ele é utilizado pra definir que a primera linha ocupa o tamanho do elemento e que sobre de espaço vá para a segunda linha, mas como exatamente se usa o grid-template-columns para definir a altura das linhas ??? Desde já agradeço!

2 respostas
solução!

Olá Fernando, tudo bem?

Obrigada por sinalizar, na verdade esse trecho foi com um erro de digitação na hora de publicar a atividade, eu acabei de consertar.

O gabarito correto é:

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

Dessa forma, a primeira linha tem exatamente a mesma altura da imagem (auto) e o restante da altura é direcionada para a segunda linha (1fr).

E uma observação importante é que quando estamos falando de modificar altura, a propriedade responsável é grid-template-rows:, já a modificação da largura, é a grid-template-columns:.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar!

Abraços e bons estudos :)

SIm com certeza ajudou, obrigado vou marcar como solucionado!!!