🖼️ Fluid Grid of Random Images! 🖼️
rjlevy (452)

I set myself the challenge of making a fluid grid of random images which is fully responsive on any device 💻

All the images are generated on the fly using the Unsplash API and are resized using media queries. Try resizing the browser to see the fluidity of the grid 🍯

Features 💡

  • Choose any number of images (from 1 to 999!) and press enter
  • The input field is fully validated with error handling
  • Each random image is fetched from Unsplash API
  • All the images load into a scrollable container
  • Resize your browser to see media queries adjust the size of the images and number of columns per row
  • Click on an image to see full-size image on the Unsplash website
  • This is made from scratch with vanilla JavaScript and CSS - no frameworks or libraries
  • All works with just 80 lines of JavaScript! ⚡️

Links 🔗

You are viewing a single comment. View All
Bookie0 (3948)

pretty cool!

A tip could be to make is so that if the user chooses a number like 1 or 2 or 3, or another small number like that, the grid could kinda close around so that there's less of that white empty space! ;)

rjlevy (452)

Hi @Bookie0, thanks for your feedback! It's a good idea although it might be a bit tricky to achieve. I'll take a look...