one day of code

Google photos grid using only css

October 09, 2021

I’d watched/read (I really cannot remember which one now anymore) how they calculated the layout and the whole “wisdom” behind the optimisation for the web… Now, it is not an exact replica, but it is as close as I could get…

Anyway, here’s the guide:

First of all you need a fixed height thumbnail (scaled down) images/videos (in my case 150px)
Snippets below :)

This is how I did it:

Use sharpjs and (for videos) ffmpeg implementation as follows:

sharp('<input.image>')
    .resize({
        height: 150,
        width: null,
        fit: sharp.fit.cover,
    })
    .toFile('<output.image>', ...);

ffmpeg -i <input.video> -vf 'scale=-1:150' <output.video>

I ommited the rest to keep the topic on point. You’d like to trim the video or just export a short gif/webm. Now you have all your images and videos scaled to 150px of height;

This is the html structure and css:

<div class="photos">
  <img src="<path-to-your.images" />
  <img src="<path-to-your.images" />
  ...
</div>

.photos {
  --space: 3px;
  --height: 150px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space);
  padding: var(--space);
}
img {
  flex: 1 0 auto;
  height: var(--height);
  object-fit: cover;
  overflow: hidden;
  border-radius: var(--space);
}

and the result :)

Example images are courtesy of placeimg.com

Written by Milan Miljkovic — a tech enthusiast and design system practitioner.