Calc() é uma função de CSS que podemos usar para fazer contas.
A conta a fazer é colocada dentro dos parêntesis. Usamos valores com
a indicação da unidade -- 100%, 20px, 4rem, etc -- e operações matemáticas
para
+ somar
- subtrair
/ dividir
* multiplicar
Entre os valores e a operação (soma, substracção...) temos de deixar
um espaço vazio. Assim: calc(300px / 3 + 5px)
Uma coisa muito importante neste exemplo, repara abaixo que os li
estão na mesma linha, quatro a quatro. Estão organizados assim porque
vamos criar 4 colunas. Se quisessemos ter 5 colunas teríamos de os
re-organizar 5 a 5, por linha; se fossem 3 colunas, agrupariamos
os li 3 a 3, e assim por diante.
Porquê fazer isto? Porque o espaço vazio no HTML
cria um espaço extra entre os li que não conseguimos anular com CSS.
Podes ler uma explicação sobre este problema e técnicas para
o contornar neste
artigo.