🖼️ Fluid Grid of Random Images! 🖼️
RolandJLevy (499)

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
fuzzyastrocat (789)

Pretty cool! Is it suppose to only crop/scale on the X-axis? I'm guessing yes because there's a vertical scrollbar, but just checking.

RolandJLevy (499)

@fuzzyastrocat, good to hear from you! Yes, good point. The scaling only happens horizontally. People can load up to 999 images so vertical scaling wouldn't be possible.

fuzzyastrocat (789)

@rjlevy Ah right, didn't think about that. Once again, nicely done!

RolandJLevy (499)

@fuzzyastrocat thanks - it's good to have your positive feedback :)

techde (92)

@rjlevy I am 9 I dont have an iPhone I used the inspect tool which might look different...

fuzzyastrocat (789)

@techde @rjlevy Interesting, I tried the inspect tool on Chrome and it seems to respond nicely.

techde (92)

@fuzzyastrocat could be my computer...