Portfolio Gallery Filtering Using Flip - Assigning Grid Areas?

[Serafla]

Hi, I'm a student creating my portfolio website right now. I wanted to use the Flip plugin like in this codepen to be able to filter my projects by category, but the only thing is I want to use an irregular grid with a 2:1 ratio. Basically, one project will be as tall as two projects next to it. I've attached an image to show this. 

 

I was wondering how I might use this grid to display my projects. Not sure if I should make grid areas a variable that I assign to projects after they are filtered, or if there is a better way to do this without grid areas. 

 

The other question I have pertaining this issue is how to make it responsive so that I can have a different grid for small, medium, large, and extra large devices. My intent is to stack the projects vertically on top of each other for small, a 2x6 grid for medium, and the 2:1 ration for large and xl. 

 

Thanks so much.

See the Pen c0311da91ea4d96722eea42384f45712 by GreenSock (@GreenSock) on CodePen

[OSUblake]

Welcome to the forums @Serafla

 

If you want responsive grids, I'd recommend using CSS grid and using fr units. Maybe some of the demos in this thread will give you some ideas on how to do that.