From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

How does the calc() function work?

How does the calc() function work? - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

How does the calc() function work?

“

- So you have this fairly standard layout here, where you have the full view port and then you want to have an image span almost the entire width of the view port, but not quite. You want a 1m margin on either side, no matter how wide this view port is. This is surprisingly challenging because since this should flex with the view port, and we don't really know the width of the view port. We can't do any basic things, like say a certain percentage width of the view port, or anything like that because if we say, I don't know, 90% of the view port that only leaves 10%. But that 10% will change depending on the width of the view port. But here we want these fixed width margins. Now in the past we've solved this problem by doing a bunch of crazy things like, reduce the width using JavaScript, or set of width and then subject the width of something. It's very, very, complicated. The good news is we don't actually have to do that anymore, because CSS can do math for us using the calc()…

Contents