I have this full-width grid of fixed-sized thumbnails which align themselves by floating left. If the clients device is
small, fewer thumbnails are shown in one row, if its bigger more. So that’s good, but there is one problem. If the
websites width is not the same as the width of one row, there is a margin on the right.
The idea is to adjust the global width, so the grid would always fit perfectly. So somehow the widh must be calculated
according to the number of thumbnails in a row. Since the thumbnail has always the same with, I can do that with media
I did it with Sass so I could generate the media queries in a loop. First I defined a couple of variables, that are
needed for the calculation, like the thumbnail width and the minimum and maximum number per row.
The base styles include, for example, the centering of the site, the thumbnail floating and setting the font size to
zero so the calculations work.
Then the media queries are generated in a loop from min to max. In the first run, the min-width is set to zero, so it
cannot go below the minimum number of thumbnails per row.
Now the site adapts to the grid, so it fits perfectly with every window size. One caveat is of course, that you need
to use this layout for all of the other sites, even if they don’t display thumbnail grids. The website width must of
course always stay the same. But I think for an image-centric website, this is a good and clean solution.