[Projeto] Grid-Area vs. Grid-row e Grid-column

Utilizei as duas formas possíveis de resolver com Grid Layout a partir do que foi visto nas aulas.

O que considero melhor é com grid-area. Fica mais descritivo e você compreende mais só com o código, sem precisar revisitar muito o layout.

.agenda__item {
    display: grid;
    grid-template-columns: 1fr 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;
}

A segunda forma foi feito com o conteúdo da segunda aula desse curso. Utilizei grid-column e grid-row para delimitar os locais de cada item.

.agenda__item {
    display: grid;
}

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

.agenda__informacoes {
    grid-row: 2/3;
    grid-column: 1/2;
}

.agenda__atracao {
    grid-row: 2/3;
    grid-column: 2/3;
}

Muito mais complexo de visualizar apenas com o código. É contra-intuitivo, porque temos 2 linhas e 2 colunas, mas como contamos os "traços" para marcar o posicionamento, surge um 3 para linha e coluna. Talvez para layouts com mais elementos compense para posicionar todos onde devem exatamente ficar, mas para poucos elementos (talvez até para muitos) prefiro o grid-area.