CSS Calc Function

— 2 minute read

The CSS Calc() function is very useful to mix percentage values with fixed pixels. We can also use the calc() function to divide into equal sets.

How to use CSS Calc()?

div {
  width: calc(100% - 50px);
}

You can already see here we make the div 100% and then minus 50px.

We can use the following:

  • Minus (-)
  • Plus (+)
  • Multiplication (*)
  • Division (/)

So another cool thing we can do is the following:

span {
  width: calc(100% / 3);
}

Awesome right! Not the recommended way of making a grid, but it will work!

See the following Codepen.

See the Pen CSS Calc Function by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter