[Dúvida] Organização do grid da .secao-vertical

Oi Pedro, tudo bem?

1. Sobre a utilização do 2fr ao invés de auto para a segunda linha: a propriedade fr é uma unidade fracional que representa uma fração do espaço disponível na grade. No caso do código apresentado, a instrutora definiu que a primeira linha teria 1fr (1 fração do espaço disponível) e a segunda linha 2fr (2 frações do espaço disponível). Isso significa que a segunda linha terá o dobro do tamanho da primeira. Se fosse usado auto, a linha teria exatamente o tamanho do conteúdo, o que pode não ser o desejado dependendo do layout.

2. Sobre a propriedade grid-column: 1/3 no cartão vertical: essa propriedade é usada para definir em quais colunas um item da grade deve aparecer. Neste caso, 1/3 significa que o item deve começar na primeira linha da grade e terminar antes da terceira linha. Como a grade tem apenas duas colunas, o item do cartão vertical se estende por toda a largura da grade. Isso é útil quando você quer que um item ocupe mais de uma coluna na grade.

Por exemplo, se tivéssemos uma grade com três colunas e quiséssemos que um item ocupasse as duas primeiras colunas, poderíamos usar grid-column: 1/3. Isso faria com que o item começasse na primeira coluna e terminasse antes da terceira, ocupando, portanto, as duas primeiras colunas.

Um abraço e bons estudos.