Fluid inline-block products browsing page
The advantage of a fluid inline-block kstrategy to display product thumbnails is that the thumbnails will arrange themselves depending on the screen size.
The draw back is that if the images have various size in width they will be completely jagged on the mobile display. In case the height varies, they will be jagged in large screen too, so it requires to use standard width and height. The length of the product name can also be a problem, pushing the next product card to the line below. For that reason you want to have media query so that the card takes 80% of the width of the screen on the smallest screen size to have your products display on one column.
Last draw back for which I don’t have a solution yet is centering. The inline-block div will align left and if there is a gap on the right that is even one pixel too small for the next card, the space will be left blank. It’s up to you if you consider this acceptable or not.
A grid system allows to keep everything nicely organized. The drawback is for it to work you will have to set break points to change your grid organization depending of the screen size. The number of screen size available on the market is already quite large and you want to check how your page will look on various display (first and foremost the most popular ones). But there will be new ratio of screen display coming up in the market that will be in between your existing break point and might break your carefully crafter design.
To avoid this issue I style the website starting from the smallest screen currently on the market and then I use the “responsive” feature of the dev tool and change the screen size until the design “breaks”. That’s where I set my new break point and implement new rules.
All is perfect is the best possible world you would say, but I actually also like to use bootstrap framework and it has breakpoints on its own.
And if you are using other CSS framework they also comes with their own breakpoints and they might fit so well the latest device on the market, same if you use a theme you have not developped etc.