Pessoal, na boa, essa dúvida da altura não foi explicada pela instrutora. Poderiam, por favor, explicar com imagens de onde ela tirou essa altura de 120px?
Pessoal, na boa, essa dúvida da altura não foi explicada pela instrutora. Poderiam, por favor, explicar com imagens de onde ela tirou essa altura de 120px?
hoje, com a Alura e o Google Gemini
Oi, Pedro, tudo bem?
A altura de 120px foi definida na propriedade grid-template-rows para a classe .secao-horizontal. Essa propriedade define a quantidade e o tamanho das linhas em um grid. No caso, foram definidas duas linhas, sendo a primeira com altura de 120px e a segunda com altura automática (auto).
.secao-horizontal {
grid-template-rows: 120px auto;
}
A escolha por uma medida fixa (px) em vez de uma medida relativa (%, fr) é para garantir que a altura da primeira linha sempre se mantenha a mesma, independentemente da altura da segunda linha. Isso evita que um valor interfira no outro, o que aconteceria se fossem usadas medidas relativas.
Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum!
Abraços!
Oi Rodrigo, tudo bem?
O conceito eu entendi. O ponto é que a instrutura disse que tirou isso do Figma.
Poderia mostrar no Figma onde fica essa medida, por favor?
Oi, Pedro, tudo bem?
Desculpa a demora em te responder!
No Figma, o valor que a instrutora utiliza é baseado na distância entre os ícones de seta na parte superior da tela ao lado esquerdo e os cards de áudios tocados recentemente.
O valor pode ser consultado na aba lateral direita, tanto na versão de "Design" quanto na versão "Dev". No caso, como estamos desenvolvendo um projeto web utilizando HTML e CSS, é útil ver essas informações por meio do "Dev Mode", que pode ser acessado no canto superior direito da tela ao lado do botão "Share".
Ao clicar no retângulo rosa que criei para facilitar a visualização do espaço entre esses elementos, ativar o "Dev Mode", ir na aba "Inspect" e olhar as opções de "Layout", eu consigo definir o valor do espaçamento usado pela instrutora.
Ao codar um projeto desenhado no Figma, muitas informações podem ser tiradas dele, mas também algumas alterações podem ser feitas para beneficiar o projeto.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!