Using modulus in css calc function

css calc parent width
css calc height based on width
css calc(auto)
css nested calc
css calc width percentage minus pixels
css calc performance
css modulus
css calc round

Is there any way to use or implement modulus operator in css calc function? I know there is mod operator and IE supports it, but what about other browsers?

For example

#element-id{
     width: calc( 100%  mod 5 );
}

Unfortunately, there is no more mention of the mod operator in recent specs.

The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.

You may want to resort to using javascript to achieve such behaviour.

var el = document.getElementById('element-id');
el.style.width = (100 % 5) + '%';

calc(), The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple  align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom

Simply..."NO".

MDN

The expression can be any simple expression combining the following operators, using standard operator precedence rules:

+ Addition.

- Subtraction.

* Multiplication. At least one of the arguments must be a <number>.

/ Division. The right-hand side must be a <number>.

Keep Math in the CSS, There is a sentiment that leaving math calculations in your CSS is a good idea that I agree with. For example, like in our use cases for calc() article, what about columns in that 7-column grid that span? Magic formula! CSS has a special calc() function for doing basic math. Here’s an example:.main-content { /* Subtract 80px from 100vh */ height: calc(100vh - 80px); } In this guide, let’s cover just about everything there is to know about this very useful function. calc() is for values. The only place you can use the calc() function is in values. See these

How to use the CSS calc() function, For example, you can multiply pixels with percentage. What if I'm already using math functions with a preprocessor? If you're using preprocessor  CSS calc() is a function used for simple calculations to determine CSS property values right in CSS. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. The most useful feature of this function is the ability to mix units.

Only Internet Explorer supports the mod function, I'm afraid, and it has been dropped from the CSS spec, so other browsers are not likely to support it any time soon.

CSS layout gets smarter with calc() | Web, Is there any way to use or implement modulus operator in css calc function? I know there is mod operator and IE supports it, but what about  Finding modulus with Casio fx-991ES Plus C and any other calculator - Duration: 2:11. Equaser.com 67,314 views

JavaScript Arithmetic, What you can do with calc()?. The calc() property can be used anywhere there's a CSS length or number in your stylesheet. It gives you two main features to  The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

CSS calc() function, The modulus operator ( % ) returns the division remainder. And (as in school mathematics) the precedence can be changed by using parentheses:  So, the current spec as well proves this using parentheses inside calc() is nested calc. Learn more about css variables here.

MySQL MOD() Function, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  All CSS Preprocessors do have math functions and they are pretty useful. But they aren’t quite as powerful as native math. The most useful ability of calc() is its ability to mix units, like percentages and pixels. No Preprocessor will ever be able to do that. It is something that has to happen at render time. Syntax

Comments
  • No way.. If you serve your html file via a PHP server (for example), put the style inside the html markup instead. That way will let you compute this.
  • Do you have a reference that IE supports or supported the mod function? It doesn't seem to work now.
  • Unfortunately not. Sorry. I can't even recall which version I was referring to :-/
  • That's too bad. Post if you ever find it or remember.