Search code examples
cssmultiple-columnsviewportimage-scalinglandscape-portrait

Presenting images dynamically multirow multicolumn

I want to represent around 20 images on a webpage. The images can have a portrait or landscape orientation. I'd like to structure them in a 3 per row fashion on bigger screens, decreasing to a 1 per row on mobile phones, maybe 2 per row for tablet-like devices. But layout could also depend on the orientation of the viewport. I have these requirements:

  • The row-height should be the maximum height of any photo in the row. For example: with two portrait photos and one landscape in a row, the row height becomes the height of the portrait photos.
  • The landscape photo should be placed in the center of its cell and leave empty space on top/bottom.
  • The portrait photos should fully occupy their cells.
  • Columns should be equally divided over the available width (33.33%, 50% or 100% screenwidth).
  • I also would like the page to be responsive, i.e. the images have to shrink/enlarge depending on the browser screen width/height.
  • A caption per photo to be located in the center of the picture just under the top of the image, to display a counter or small descriptive text.

I've read many articles not to go with the table-solution, but rather with a div-solution. Any help would be appreciated highly.

Solution 

  • body {
  margin: 0;
  padding: 0;
}

.gallery {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.gallery > li {
  flex-basis: calc(100% / 3);
  display: flex;
  align-items: center;
  justify-content: stretch;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .gallery > li {
    flex-basis: calc(100% / 2);
  }
}
@media (max-width: 767px) {
  .gallery > li {
    flex-basis: calc(100% / 1);
  }
}
.gallery > li > figure {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin: auto;
}
.gallery > li > figure img {
  max-width: 100%;
  height: auto;
  display: block;
  order: 1;
}
.gallery > li > figure figcaption {
  order: 0;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  text-align: center;
  position: absolute;
}
    <ul class="gallery"> 
  <li><figure><img src="https://picsum.photos/g/200/300?image=0" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=10" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/200/300?image=20" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=30" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/g/300/300?image=40" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=50" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=60" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/g/200/300?image=70" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=80" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/200/300?image=90" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=100" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/200/300?image=110" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/g/200/300?image=120" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=130" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=140" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=151" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=160" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/200/300?image=170" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=180" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=190" alt=""><figcaption>This is a caption</figcaption></figure></li>
</ul>