0

I wrote the following code in css. The purpose of the first line is to calculate the number of objects that can fit in one line based on the screen width and that calculated number is used in the second line to calculate the width of these objects.

:root{
--linkCount: calc(100vw / 200px);
--linkwidth: calc(230px + (100vw - 60px - (var(--linkCount) * (230px + 6px))) / var(--linkCount));
}

The problem is that the first calculation calc(100vw / 200px); is not working. When I run this code on the website, the objects have the smallest width possible based the content (so basically width:auto;) When I replace it with e.g. calc(5); or 5; it works. I already tried removing or adding spacing but no luck.

edit 1

Here a code snippet. The two variable are placed in the :root https://jsfiddle.net/josvm9dw/

Can somebody explain to me why it is not working because I don't get it.

Vinc199789
  • 1,046
  • 1
  • 10
  • 31

2 Answers2

3

You can't divide vw by px, they're different units of measurement. Divide only by absolute numbers:

--linkCount: calc(100vw / 200);

Use 200 or however much you need.

igg
  • 2,172
  • 3
  • 10
  • 33
1

Docs When it comes to multiplication and division you don't need to specify the unit, because it's just not needed 

calc(100vw * 5px)

Why px specifically all we want is to multiplay the first value by 5, And same goes for division.

However you can add and subtract other units together.

demo

div {
  background: red;
  margin-bottom: 5px;
  height: 50px;
  white-space: nowrap;
  color:white;
}
/* At least one must be a number */
div:nth-child(1) {
  width: calc(100px * 3);
}

div:nth-child(2) {
  width: calc(100vw * 50vh);
}


/* the right side must be a number */
div:nth-child(3) {
  width: calc(300px / 2);
}

div:nth-child(4) {
  width: calc(2 / 200px);
}

/* both can be units */

div:nth-child(5) {
  width: calc(200px + 3em);
}

div:nth-child(6) {
  width: calc(100px + 10vh);
}

div:nth-child(7) {
  width: calc(200px - 20pt);
}

div:nth-child(8) {
  width: calc(100vw - 50vh);
}
<div>calc(100px * 3);</div>
<div>calc(100vw * 50vh); Invalid treated as auto(default)</div>

<div>calc(300px / 2);</div>
<div>calc(2 / 200px); Invalid treated as auto(default)</div>

<div>calc(200px + 3em);</div>
<div>calc(100px + 10vh);</div>
<div>calc(200px - 20pt);</div>
<div>calc(100vw - 50vh);</div>
Rainbow
  • 6,772
  • 3
  • 11
  • 28
  • Thanks for the reply but it is not working, not even `calc(800px / 200);`which should result 4 – Vinc199789 Dec 20 '19 at 17:33
  • @Vinc199789 Can you provide a code snippet reproducing the issue ? – Rainbow Dec 20 '19 at 18:54
  • I added a code snipped in the original question – Vinc199789 Dec 20 '19 at 19:25
  • The issue is that your second calc `--linkwidth:` is not following the rules, `var(--linkCount)` that will return a value with pixels as the unit and as mentioned before you can't use units in multiplication and division. to fix this remove units from your first `--linkCount: calc(800 / 200);` – Rainbow Dec 20 '19 at 19:34
  • That works, but do I get it working with the `100vw` because I want the 800 to be replaced by the screen width. – Vinc199789 Dec 20 '19 at 19:35
  • I'm not really sure how you can get calc to output a value without a unit, i suggest that you rethink your math with regards to the rules – Rainbow Dec 20 '19 at 19:49
  • Alright then. Thanks for your help, I will try to find another way. I want to avoid using JS because of the loading speed. I will share it here if I found a valid css solution – Vinc199789 Dec 20 '19 at 19:53
  • I'm guessing it can be done, if you can find a way to leave the unit last – Rainbow Dec 20 '19 at 19:56