DEV Community

Cover image for CSS Calc Function
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

CSS Calc Function

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)