CSS Calc Function


Learn how to benefit the CSS Calc Function

2 Jun, 2020 ยท 1 min read

The CSS Calc() function is handy 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 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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

CSS Logos: Vue logo

22 Jun, 2022 ยท 3 min read

CSS Logos: Vue logo

CSS Logos: Strava logo

21 Jun, 2022 ยท 5 min read

CSS Logos: Strava logo

Join 1513 devs and subscribe to my newsletter