css-calc

I'd like to calculate the number of rows in a grid template using calc() , but trying to get the repeat count with division isn't working: .grid { display: grid; grid-gap: 10px; grid-template-columns: 1fr; margin-bottom: 10px; background: rgba(0, 0, 0, 0.2); } .grid>div { background: tomato; width: 20px; text-align: center; margin: auto; } .grid.no-calc { grid-template-rows: repeat(3, 30px); } .grid.addition { grid-template-rows: repeat(calc(1 + 2), 30px); } .grid.subtraction { grid-template-rows: repeat(calc(4 - 1), 30px); } .grid.multiplication { grid-template-rows: repeat(calc(3 * 1), 30px)

Can I use calc() with border-width? I would like the following CSS to work: .my-element { border-left-width: calc(10% + 10px); border-right-width: calc(10% + 20px); } But for whatever reason, any value I provide with calc() results in no border at all. The documentation I've found on MDN aren't clear about whether calc can be used - it says that I should use Any <length> value , but does that include calc? I target IE9, but I get the same results in Chrome 34 and Firefox 28. I know I can alsway use jQuery to achieve these things, but I want to avoid it if at all possible. Unfortunately, border

<div id="outerDiv"> <div id="innerDiv"></div> <div id="remainderDiv"></div> </div> #outerDiv, #innerDiv, #remainderDiv{ height: 100px; } #outerDiv{ width: 55.5px; z-index: 1; background-color: red; } #innerDiv{ width: calc(100% - 10px); z-index: 100; background-color: blue; float: left; } #remainderDiv{ width: 10px; z-index: 100; background-color: green; float: left; } http://jsfiddle.net/yz8cwj3a/ Result: http://i.imgur.com/DYor2yb.png This fiddle shows a problem with Chrome 37. Using the calc(100% - 10px) function on an element with decimal pixels, it always rounds down. This causes strange

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) + '%';

Can I use the css calc() function when setting positions in JavaScript? ePopup.style.top = "calc(100px - 1.5em)"; Rounin Yes, calc() will work when setting styles in javascript. Working Example: var innerDiv = document.getElementsByClassName('inner-div')[0]; function growInnerDiv() { innerDiv.style.width = 'calc(100% + 224px)'; } innerDiv.addEventListener('click', growInnerDiv, false); .outer-div { display: inline-block; width: 200px; height: 100px; padding: 12px; border: 1px solid rgb(255,0,0); background-color: rgb(255,255,0); } .inner-div { width: 100px; height: 100px; color: rgb(255, 255,