Just found out CSS can do math and my mind is blown

I was messing with a layout yesterday and needed to center something. Looked up a calc() for the first time and realized you can do actual math right in your stylesheet. Like width: calc(100% - 40px). That saved me from having to mess with padding or extra divs. Has anyone else found a random CSS trick that made you feel like you were missing out this whole time?

3 comments

3 Comments

lunakim1mo agoMost Upvoted

I mean, I guess it's cool and all, but I've always just used flexbox for centering and never needed math in my CSS. Feels like another thing to remember when the layout could just be simpler.

stella_murray1mo ago

Wait, does the math version handle responsive scaling better when you've got a complex component grid with varying content heights?

gavinw451d ago

Buddy of mine spent a whole afternoon wrestling with a grid like that and the math version just snapped everything into place without any gaps or overlaps lol. He said it saved him from rewriting media queries like ten times.