Internet shop, adaptive catalogue. Implementation

Question

css

If the user has a 1900px wide monitor, then it is reasonable for him to add a couple of products to the screen, which wastes space. In the case of a 1000px wide screen, the products are hidden.

Here is what I found from a more or less logical implementation www.svachon.com/wordpress/wp-content/demos/wrecker/advanced.html here a new column is added from the width and the elements themselves increase, since there is space. Although all the same float:left

There are of course such funny things:
www.wookmark.com/jquery-plugin
masonry.desandro.com/
But they do not fit well due to their implementation.

The two of us spent the whole day thinking about adding products to wide monitors, but everything breaks down when pagination begins.
In fact, all the responsiveness will go to all sorts of widgets such as promotions and new items, but something doesn’t fit into the catalog and is simpler than float:left. do not rely on the adaptive algorithm and dynamic elements.
And I haven't seen anything like this from the big stores.

Has anyone else experienced this and what was the solution?

Answer 1

media queries to help you

Answer 2

Forgive me, I have been asking this question for a long time and sometimes I return to it again.
The best solution (IMHO), has developed in this method:

The catalog is the most important. This is a filter, easy navigation through categories and the catalog of goods itself. Well, okay...
There is a div with a width of 100%, we drive 2 columns there. one of them is fixed (it may not be fixed) and the second is rubber with an indent of different widths of the first column. As you might have guessed, the first column has navigation, filters, and other goodies. We shove the catalog of goods into rubber. The manipulation is comfortable and graceful. With huge screens (4k+ / TV) we can play around with the size of the product, but it’s better to take the maximum width for the container). Such a place is also convenient for tablets, we hide the first column a little less ... well, this is closer to the UI.

Amen.
ps Masonry is not needed, do it conveniently for the client.
If the product or some content does not fit - this does not mean to style all the "bottlenecks" (I think Lebedev wrote).