How to show first 3 items in the browser ?
I want it to be like in the image.
Im not sure how to make it so that the third item is like first 2 items and when scrolling it scroll one item at a time.
I didn't tried to impement javascript functionality yet because I struggle with css. I tried to do with grids and flex but the third element bottom is always behind and I want to see 3 items with margin of 2em and row-gap of 2 em.
5 Replies
The size of items always the same.
just to be clear. You'd like the three items to be 1 unit, the next to be 2 units and the third to be 3 units? Or 1, 2, 4 units?
Either way i would use a flexbox with a set height, padding, and margin, and using flexgrow to size the containers
i think grid and fr units wold also work here, no?
Thats true
Well the item is just a same class for each div. From top to bottom 1, 2, 3 div and so on it doesn't rll matter what content will be inside those divs all I want is to see how to do in css with flex box and grid.
I just got it. No each item is they own unit
It will show first 3 units and when scrolled the scroll bar the 1, 2,3 items becomes 2,3,4 and so on.