Responsive image gallery using CSS flexbox or grid-layout

Question

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

I am wondering if css-flexbox or css-grid can do this without having to define rows and columns in the code and without having to have breakpoints / media queries.

Images with thumbnails are wrapped in an anchor, so the gallery element (or grid element) will look something like this:

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

Gallery elements must completely fill the div container, i.e. there should be no gap between the last sketch in the line and the right edge of the div container (except when we do not have enough elements to fill the line, i.e. when there are 3 ft elements in the line, but we only have 8 elements, then the 3rd the line will have only 2 elements and a space on the right equal to the width of one element).

Gallery elements can never be wider than the width of the user set, which will not decrease, because we do not want to degrade the quality of the thumbnails. For this example, let's say a width of 300 pixels. Fields between gallery elements are fixed and set by the user. If there are not enough elements left to fill the line, simply align them to the left. For instance:

CSS html / . , , . (.. 3 * 300px width = 900px, 1000px), , , , . .

gif ( ):

, gif, flexbox, CSS, flexbox. flexbox, .

!

Answer 1

flex . IE11: http://caniuse.com/#feat=flexbox.

:

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

:

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

:

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

margin. , (<a>) (<img>).

, , flex-grow, flex-basis max-width . - , n - 1 ( n ) .

width height 100% , max-width, .

, : FIDDLE

Answer 2

, CSS Grid Layout. IE10 +.

:

.gallery {
    display: grid;
    grid-gap: 5px;
}

:

.gallery img {
    width: 100%;
}

(, Bootstrap 4)

@media (max-width: 575.98px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (max-width: 768.98px) and (min-width: 576px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 991.98px) and (min-width: 768px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr); 
    }
}
@media (max-width: 1199.98px) and (min-width: 992px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr); 
    }
}
@media (min-width: 1200px) {
    .gallery {
        grid-template-columns: repeat(5, 1fr); 
    }
}

jsFiddle