CSS Calc Function

The CSS Calc() function is handy for mixing percentage values with fixed pixels. We can also divide the calc() function into equal sets.

How to use CSS Calc()?

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

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

We can use the following:

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 my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter