Como usar a função Calc de CSS

Uma das novas funções de CSS que mais utilizo é o calc, para bom entendedor de CSS o simples código abaixo irá te revelar o poder dessa função:

.grid-6 {
 margin: 0 10px;
 width: calc(50% - 20px);
}

Não entendeu o que tem de tão bom ainda? Deixa eu explicar:

Imagina que você possui um container com 2 elementos, cada um deles ocupando metade desse container. Ou seja, você deseja que ambos ocupem cerca de 50%, um na esquerda e outro na direita.

Porém você não quer que eles fiquem grudados um no outro, você deseja uma certa margem para dar um espaço para os elementos respirarem. Ai que surge o problema, pois utilizar margens em porcentagem, nem sempre criam um espaçamento tão agradável. Pois caso o container (que estou assumindo ser fluido, assim como elementos dentro dele, ou seja aumentam e diminuem de acordo com o tamanho da tela) diminua muito, as margens podem ficar muito pequenas e vice-versa.

Geralmente as margens devem se comunicar com a tipografia do site e isso se perde caso você utilize a mesma em porcentagem.

Com isso surge a necessidade de se utilizar um valor fixo como o Pixel ou que seja flexível de acordo com a tipografia como o EM. O uso deste valor junto a um container com a distância definida em porcentagem, torna o cálculo manual impossível, pois não podemos assumir o valor dessa porcentagem, já que ela muda em cada tela.

Um container com:

.grid-6 {
 margin: 0 10px;
 width: 50%;
}

Possui uma largura total de 50% + 20px (10px de margin-left e 10px de margin-right), ao lado de outro com as mesmas características, terá um total de 100% + 40px, e isso não cabe em um container, fazendo com que o segundo elemento quebre e vá para baixo do primeiro.

Com o calc, basta diminuirmos esses 20px da porcentagem definida que o CSS fará o cálculo automaticamente. Ahhhhh mas é certo que isso vai deixar o meu site lento!!! Não assuma nada antes de testar, até hoje não existe nenhum estudo que mostre o impacto do calc na velocidade de um site (na verdade eu vejo constantemente diversos projetos do Google utilizando calc sem restrições).

A função é bem suportada, pode usar ela sem medo. É bem simples criar um fallback (um plano B caso o browser não seja atual):

.grid-6 {
 margin: 0 2%;
 margin: 0 calc(10px);
 width: 46%;
 width: calc(50% - 20px);
}

Caso o calc não funcione ele irá utilizar os 46% e 2% nas margens.

Essa é apenas uma das possibilidades, que te permite criar um sistema de grid bem flexível. Porém não para por ai, dê uma olhada no exemplo abaixo:

.sidebar {
 width: 200px;
 position: absolute;
}
.content {
 width: calc(100% - 200px);
 margin-left: 200px;
}