Aprenda passo a passo a como usar a função Calc do CSS. E veja como esta função facilita o desenvolvimento de layouts web.

Para que serve a função Calc

Em resumo, a função Calc do CSS é um jeito de definir valores CSS junto com expressões matemáticas. Por exemplo, imagine que você tenha um container quadrado de 400px. E dentro desse container, você tenha duas divs quadradas, com o width de 50% cada. Dessa forma, você terá duas divs flutuando uma ao lado da outra, ocupando todo espaço do container. Mas, e se decidirmos acrescentar uma margin de 10px entre as divs menores? Decerto, elas ficarão maior que o container principal, pois o mesmo mede apenas 400px.

Então é aí que entra a função calc( ), através dela iremos ajustar as duas divs para que não ultrapassem o tamanho do container principal. Por exemplo, vejamos um modelo prático com o uso da função calc( ).

Agora o css

O resultado é esse abaixo, um container com 400px de largura e dentro,  duas divs com 50%  de width cada.  As duas divs menores estão na cor cinza. Porém, acrescentamos a função calc () na div filho, assim deixamos elas com 50% de largura, menos 20px. Por fim, adicionamos o calc no height, e o resultado foi esse abaixo.

calc css

Diretrizes da função calc() ?

Os operadores matemáticos válidos são: + (soma), – (subtração), * (multiplicação) e / (divisão). As unidades de medida CSS válidas na expressão matemática são as unidades CSS para: comprimento, ângulo, tempo, frequência e números inteiros e fracionários.

Publicitário por formação e curioso nas áreas de designer gráfico e programação. Atualmente estudo marketing digital, PHP e JavaScript.