De onde se tira os valores das medidas dos objetos?

Uma duvida que tenho, eh que quando eu vejo codigos como o abaixo, fico pensando de onde a pessoa que fez esta tirando essas medidas?

.secao-player {
    padding: 16px;
    width: 100vw;
    display: grid;
                      **grid-template-columns: 204px 1fr 164px;** (valores das medidas ?????)
    grid-template-rows: auto;
    column-gap: 1.25rem;
}

.player_descricao {
    grid-area: 1 / 1 / 2 / 2;
    display: grid;  /* Grid para área de descrição do conteúdo */ 
                        **grid-template-columns: 56px auto;** /* Colunas para área de descrição do conteúdo */  (valores das medidas ?????)
    grid-template-rows: auto auto; /* Linhas para área de descrição do conteúdo */
    row-gap: .4rem;
    column-gap: 0.6rem;
}

O que esta entre "**" eh o que quero destacar. Ok que no figma tem essas medidas, mas, e se fosse eu fazendo uma pagina dessa do zero? Como saber tais medidas? De onde tiro isso?

So pra enfatizar a duvida, veja a seguinte linha:

grid-template-columns: 204px 1fr 164px;

Porque 164px?

Aproveitando a pergunta, eu vejo que tem um AUTO no gap? Como ele funciona? Eu notei que no figma, aonde tem o cartao, a largura eh 204px, aonde tem o volume a largura eh 164px e aonde tem o player, a largura eh 718px, ou seja, nao eh 1fr. Somando tudo, daria 1086px. Entao se a largura eh 1440px, seria 1440-1086 = 354px, o que ficaria dividido para os dois gaps auto? Eh assim que funciona o gap no auto? Grato pela atencao.