Javascript/CSS - 由滚动高度定义的宽度收缩率

Question

I have a bit of a funny creative coding situation/a logo - where I have a div consisting of around 130 other colored divs and they together form the logo when at the top of the page, and as you scroll the page, the divs shift around and distort the logo, you can see it in action here: https://warehouse.netlify.app/ and the div situation here: https://github.com/nejurgis/warehouse/blob/master/src/components/DivOverlay.js as you scroll - the container div width shrinks and in that way it pushes all the children divs around

now the question is: would anyone have an idea how to shrink the container div width according to the height of the whole page aka how to make the logo 'collapse' only at the end of the scroll and not mid-way as it is now?

Answer 1

Cool idea!

Consider using css grid https://css-tricks.com/snippets/css/complete-guide-grid/ using this you can specify the columns and rows of your grid and have all your divs automatically fill out each spot.