Responsive image gallery using CSS flexbox or grid-layout

Question

I am working on an Image-Gallery-Widget where the user can set a thumbnail width, thumbnail height and margin (between thumbnails) and the widget will present all image-thumnails in a nice grid where each image has the same width and height.

I am wondering whether css-flexbox or css-grid makes this possible without the need to define rows and columns in code and without the need for breakpoints/media-queries.

Thumbnail-Images are wrapped in an anchor, so a gallery item (or grid-item) will look something like this:

<a href="#" class="gallery-item">
    <img src="myimage" width="300" height="200" />
</a>

The gallery items should fully fill the container div, which means, there should not be a gap between the last thumbnail in a row and the container div's right edge (except if we don't have enough items to fill the row i.e. when 3 items ft in a row, but we only have 8 items, then the 3rd row will only have 2 items and a gap to the right which is as wide as one item).

Gallery items can never be wider than the thumbnail-width the user set, because we don't want to degrade the quality of the thumbnails. Let's assume 300px width for this example. The margin between gallery items is fixed and set by the user. If there are not enough items left to fill a row, simply left align them i.e. like so:

I do not want to define any breakpoints in CSS nor add any html for row/column constructs. I want the browser to simply place as much gallery items side by side as fit into the container. If there's a gap on the right (ie 3 thumbnails * 300px width = 900px, but container is 1000px wide), the browser should scale down the grid items, so that one more gallery item will fit in and thus eliminate the gap. I need to be able to define a margin around each gallery item.

You can see the desired responsive behaviour (when changing the browser width) in this gif:

What you see in the gif is done without flexbox but needs a ton of CSS which I was hoping to avoid with flexbox. I have researched flexbox quite some bit, but haven't been able to get my head around it fully just yet.

Thanks for any tips!

Answer 1

Using flex capabilities should be sufficient for your task. Be aware of partial support in IE11: http://caniuse.com/#feat=flexbox.

Put these styles on your container:

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}

Styles for wrappers:

.gallery a {
  flex-grow: 1;
  flex-basis: 125px;
  max-width: 300px;
  margin: 5px;
}

Styles for images:

.gallery img {
  height: 100%;
  width: 100%;
}

Space between images can be simply defined using margin. In order to preserve image ratio you can use for example links (<a>) as a wrappers for images (<img>).

Furthermore, in order to prevent enlarging images, you can apply flex-grow, flex-basis and max-width attributes on anchors. There was also a problem with stretching images in the last row - hack for that is to put n - 1 (where n is number of images) empty items inside container.

Setting width and height to 100% on the images enforces them to grow automatically up to the width defined by max-width attribute, while maintaining aspect ratio.

Please check the working example: FIDDLE