From all examples I’ve seen so far, it’s more common to see a picture gallery designed for desktop, with 3 or 4 columns / thumbnails per row, and as the screen gets smaller the number of columns becomes less, until for small phone screens there is only one thumbnail per row.
I don’t want this, In fact I want the opposite. I want to start with 3 thumbnails per row (i.e. 3 columns) on a mobile device of say (W=270px); That means each thumbnail is approx. 90px wide;
If the phone gets smaller, say width =180px then I’d only fit 2 thumbnails; If the screen gets really small, say 100px (UNREALISTIC I KNOW) then I’d only fit 1 thumbnail.
Now going the other way, as the screen gets bigger, I want to fit more thumbnails per row (and potentially increase the thumbnail size).
Say, when it’s a multiple of 90px: (x4= 360 WIDTH), fit 4 thumbnails per row, etc., at 90x5 = 450px Width, fit 5 thumbnails, etc.
My questions are a) what are my options, do I have to use Media Queries to achieve the above? b) Would Flexbox or CSS-Grid be enough? c) Are there any examples that implement what I described?