Howdy,
Context:
I am attempting to recreate a section which has required some complex use of grid layouts. In an effort to conjoin the grids and get a mobile responsive layout using grid areas, I have attempted to set some of the grid layout sizing across these grids using dynamically adjusting “grid-template-rows” style assignments in my JavaScript file.
The basic construction is that the elements should appear in a row together and should have a uniform height set by their tallest pseudo sibling, despite being in separate grids by necessity for layout purposes.
I set the various grid item elements into a “row” array which is looped through to create a new array of their heights, which is again looped through to find the tallest height among them. I then do this for each row and take the heights given and set all grid-template-rows style for the multiple grid parents using those variables as fixed heights.
I am console logging the heights at several points to cross check them. The grid style changes have a media query screen size conditional statement wrapping them to account for variations in layout at mobile view.
I then created a ResizeObserver for the body element which should in theory dynamically adjust the heights as the window resizes.
Broken Features:
The heights logged by offset-height of my div element variables don’t seem to match up with the value of the sum of my element content height plus it’s padding.
On desktop it seems to be overvaluing, creating white space below as though the tallest element is actually slightly taller, while at mobile it is cutting short and bleeding over it’s assigned grid height which itself is too small relative to the heights of their contents.
In the Dev tools adjusting the grid height of the mobile row doesn’t seem to create more space for some reason, though I’m not sure where the constraint causing overflow is coming from if not the grid row height. I need to understand this part for this to be a viable solution.
My ResizeObserver is also not working as intended. Likely because I have not configured it correctly or because I have not appropriately repopulated the variable values with updated figures. I’m not familiar enough with it specifically to know what all is broken.
I’m in dire need of a consult.
Suggestions welcome