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.

Grid with margin

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 queries instead of Javascript.

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 outer left and right padding is needed for the calculation */
$site-padding: 15;
/* the thumbnail width */
$thumbnail-width: 96;
/* the thumbnail margin */
$thumbnail-margin: 5;
/* minimum thumbnails per row */
$min-per-row: 3;
/* maximum thumbnails per row */
$max-per-row: 9;

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.

.site {
  /* site is centered */
  margin: 0 auto;
  padding-left: $site-padding + px;
  padding-right: $site-padding + px;

  .thumbnail-container {
    /* add some margin to the navbar */
    margin-top: 40px;
    /* subtract the thumbnail margin on the left */
    margin-left: -$thumbnail-margin + px;
    /* subtract the thumbnail margin on the right */
    margin-right: -$thumbnail-margin +px;
    /* remove all text so the calculation works */
    font-size: 0;

    /* clearfix */
    &:after {
      content: "";
      display: table;
      clear: both;
    }

    .thumbnail {
      /* Bootstrap override */
      padding: 0;
      /* thumbnails float left */
      float: left;
      width: $thumbnail-width + px;
      margin: $thumbnail-margin + px;
    }
  }
}

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.

@for $i from $min-per-row through $max-per-row {
  /* all thumbnails plus margin */
  $main-width: ($thumbnail-width * $i) + ($thumbnail-margin * 2 * ($i - 1));
  /* the thumbnail with plus site padding */
  $site-width: $main-width + $site-padding * 2;
  /* the site width plus offset */
  $media-width: if($i > $min-per-row, $site-width + 30, 0);

  @media (min-width: $media-width + px) {
    .site {
      width: $site-width + px;

      .main {
        width: $main-width + px;
      }
    }
  }
}

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.

Grid

Demo: http://vicox.net/fixed-sized-thumbnail-grid/

Github: https://github.com/vicox/fixed-sized-thumbnail-grid