Load more - responsive layout

Question

I need to create a responsive section, that has a load more button.

I want the page to show one (small screens), two (medium) or three (large) entries per row.

Also, on clicking 'load more' one, two or three more entries should be loaded. It'd be great, if it would adjust the number of entries on resize.

I took a look at sprig, which is great. But i have no idea how i can implement the sprig component in a responsive way.

Does anyone have an idea how i can achieve this behaviour?

Answer 1

Have you look at the matchMedia() API?

This can allow JavaScript to make different decisions based on viewport size and probably is key to changing this behaviour, whether with Sprig or any other technique.

Although, if I'm honest providing different content like this doesn't seem fantastic. Maybe consider providing the same content for all screens and treat them differently using CSS.