No, I understand, you English is great! I was looking at this on a phone, and on the phone it sits in a single column - what I suggested would work with a bit of fiddling around, but isn’t actually much use for a 2d layout now I’m looking at it in front of a computer.
What he’s used is a library called Isotope, which is a filtering version of a library by the same developer called Masonry, which gets used/copied a lot (Pinterest is the most obvious example). So initial answer is use Isotope.
Because it’s using a grid of a fixed size, I think at least most of this might be possible using CSS grid and the
auto-flow: dense property (automatically fills empty holes in the grid), which looks to be supported fairly well now. The issue is that the bit you really want, the slide, I don’t think is possible. And that’s the thing that kills any simple solution I can think of.
You need to know the position of the items in the grid (which can be down pretty easily in JS, you just need the top left corner of each one), and you need to know the order and what type each one is. Then when you remove any through filtering, you find the next “alive” one, and apply
transform: translate(x,y) (in JS) to move it over where it should be.
You could do something like this with CSS Grid, and the
dense property (note this may not work, but it’s the closest I can get sketching out an idea in my head):
- Filter clicked
- Clone the elements that are not hidden using JS, those clones need to sit exactly above the elements they are clones of.
- All the underlying elements that have been cloned, set opacity 0
- Fade out the elements that need to be hidden, then display:none so they’re no longer in the grid, and it reflows.
- translate the clones to the new positions, animating the transition. They should be directly above their original counterpart.
- Opacity 1 on the grid items and delete the clones