Limit number of portfolios shown in portfolio grid based on screen size

My site is showing a grid of 4 portfolios (2×2). This looks fine on a standard screen (1500px wide). When I look at it on a larger better res screen (2500px wide), there’s a lot of white space to the side of the grid. Is there a way to show a certain number of posts in the portfolio grid depending on the screen size? So on the larger screens show a grid of 8 (4×2), then down to 6 (3×2) and then finally to 4 (2×2).

I could use media queries and CSS to hide them using nth-child but I was wondering if there’s an option or hook/filter I could use that is a cleaner solution?

Thanks in advance