Snap element height to multiple of 100px

Question

I managed to snap the with of an element to multiple of 100.

:root{--unit:100px;}
.grid{
    display:grid;
    gap:0;
    grid-template-columns: repeat( auto-fill, var(--unit) );
}
.grid-content { outline:4px solid #ccc; grid-column: 1 / -2; }

How can I get the same in vertical (element height). It hasn't to be grid, it can be whatever, as long it'not JS. Here ist the pen: https://codepen.io/szopos/pen/ZEXBWrg

Anthemion

can you define the logic? it should N*100, ok, but N will be based on what? what's the math behind it? – Assentor

@TemaniAfif if U resize the browser, the width of the element will snap to the sizes 100, 200, 300 and so on, according to the current browser with. In the height it should also snap to these values, based on the amount of text. – Anthemion

for the width the logic is clear: N*100 Where N is the biggest integer such as N*100 < browser width. What about the height? we need a specific "math" definition to do it. What you are describing is not clear – Assentor

In JS it would be: snappedHeight = Math.ceil(elHeight / 100) * 100 – Anthemion