How to create infinite site?
How to create site like miro (infinite)? I mean, i need to create site that you can scroll and scroll in all directions (depending on amount of content, more content, more scrolling). I'm now trying to make this site with
overflow: auto, but it works not how I want. Maybe there is some videos about this?
More specifically, the result of what I did didn't suit me because I couldn't center the container properly. That is, I had a container main, and in it a container expenses, the container main I did not set the size, as well as the container expenses (but set the size of containers inside expenses), and when I tried to center the container expenses relative to the container main all centered, but the content on the edges of the container expenses became unavailable.
And I also want to say that I don't need content generation when scrolling (at least for now), I need to be able to view the entire expenses container content in peace.6 Replies
you could make a grid full window size with overflow scroll.
and each grid cell 100% width and height
optional with scroll snap.
and with js you could jump to a specific cell on page load
--removed codepen, backup below
Really cool codepen! I didn't know it was that easy to make snap scrolling; I remember last time I tried to do it it was a PITA.
I'm a bit confused on your inline styles.
<div style="grid-area: one ; --i: 1">grid-area-1</div> <- specifically, --i, and then your accessing it in css with var(--i). What the heck is this? Is this some new css thing? I've never seen this before
I know about css variables and data attributes so it just looks like you're mimicking those but instead of selecting it through a selector, you're using it inside the var() functionexactly!
i was too lazy to create class selectors for each cell to assign a grid-area, so i did it inline.
the --i is just a custom property (variable) number I added to generate a background-color.
That's cool! I didn't know you could set custom properties inline like that 👀
everything that goes in
style=" " is just regular css. so yea, also works for custom propsno response from OP anymore, so I'm removing the codepen
here a backup for future reference