DEV Community

The CSS Calc Function

Sarah Chima on December 19, 2017

I was quite excited when I first read an article on the CSS calc function. For real, the ability to perform calculations in CSS with different uni...
Collapse
 
adripanico profile image
Adrián Caballero

I've been a huge fan of the CSS's calc() from time ago.

What I really miss is having units like vh but refering to the element's container instead of the whole viewport.

Collapse
 
weswedding profile image
Weston Wedding

I avoided calc for a long time until recently where it just made too much sense to use it, and I was kind of floored by how well supported it was. I've always avoided it because it seemed like one of those things that would need to be prefixed and wouldn't be supported in lots of browsers, but I was totally wrong.

Collapse
 
sarah_chima profile image
Sarah Chima

👍👍

Collapse
 
belhassen07 profile image
Belhassen Chelbi

Sometimes I don't follow rules when working with calc() , I mix some Xvw with Ypx and it solves the problem I face in multiples devices view-port, I think Ihave to push myself sometimes to work with that rule , I mean flexbox, css grid and this powerful calc() , who needs bootstrap or any other css framework anymore? pure is better !
keep writing these great articles Sarah ♥

Collapse
 
sarah_chima profile image
Sarah Chima

I'm getting used to not using a framework. CSS keeps getting better. Thank you for always reading my articles.😊😊

Collapse
 
belhassen07 profile image
Belhassen Chelbi

it's always a pleasure :D

Collapse
 
katzy687 profile image
Natti Katz

I recently used calc for the first time to dynamically calculate row heights in css grid.

It was actually my first time incorporating css grid, css variables, and the calc function, and it just came to me naturally as a solution. I stepped back and was like omg!

Collapse
 
sarah_chima profile image
Sarah Chima

That's amazing. Thanks for sharing.

Collapse
 
craser profile image
Grumpy and

Woah. Thanks for posting this! Bookmarked, and going in my toolbox so fast! Definitely to be used with care, but when you really do need it, nothing else will do the same thing nearly so well.

Collapse
 
sarah_chima profile image
Sarah Chima

😊😊

Collapse
 
msal profile image
Mohammed Salman

Great article!

Collapse
 
ronicahern profile image
RonicaHern

What is Calc function in Javascript? Spell To Forget About Someone