Dúvida

Olá! Pelo que entendi da sua explicação, você está falando sobre um código que envolve variáveis CSS para definir as larguras de colunas em um layout responsivo, correto? Vou tentar ajudar com a sua dúvida!

O cálculo que você descreveu está correto: se o gap é de 20px e temos três colunas, cada coluna terá uma largura de 40% e um espaçamento lateral de 13px (20px - 7px = 13px).

Quanto ao uso da propriedade box-sizing: border-box, ela é utilizada para garantir que o tamanho total do elemento seja calculado levando em conta o padding e a borda, não apenas o conteúdo interno. Ou seja, ao usar essa propriedade, a largura definida para um elemento vai incluir o seu padding e borda, em vez de ser adicionada a eles.

Isso é especialmente útil em layouts responsivos, pois permite que você defina larguras percentuais para elementos e ainda assim garanta que o espaço ocupado por eles será sempre o mesmo, independente do seu padding e borda.

Espero ter ajudado! Qualquer dúvida adicional, estou à disposição.