Calc() outputting unexpected value

Question

What I would like to do is make the #grid height 160% of the #grid width via calc(var(--grid-item-width) * 1.6),

Answer 1

Both expression are the same BUT they will not resolve to the same value because they are applied to different porperties.

So using calc(100% - calc(var(--gap) * 4)) with height means that we take 100% of the parent height (containing block) and we remove 4 gaps.

Using calc(100% - calc(var(--gap) * 4)) with grid-auto-columns means that we take 100% of the element width and we remove 4 gaps. If your element is the only one on your code so it will be full screen width thus you will end using the width of the screen.

The only way to have the same value is to be sure the height of the parent is the same as the width of the element OR avoid using percentage value and rely on different unit that will resolve the same way in both cases (px,vw,vh,em,etc)

---

Note that the value used with height may fail to auto in case there is no height set on the parent element.