Cover image for CSS Calc Function

CSS Calc Function

dailydevtips1 profile image Daily Dev Tips Originally published at daily-dev-tips.com ・1 min 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

Posted on Jun 2 by:

dailydevtips1 profile

Daily Dev Tips


I write daily development tips to contribute to the development community!


markdown guide