Minimalist Touch-friendly Gallery In JavaScript

Category: Gallery , Javascript , Recommended | April 25, 2020
Views Total:4,894 views
Official Page:Go to website
Last Update:April 25, 2020


Minimalist Touch-friendly Gallery In JavaScript


A minimalist, dynamic, responsive, touch-enabled photo gallery built using pure JavaScript and CSS grid layout.

Tap the thumbnail to display the image in a fullscreen view where the mobile users can navigate between all images with touch swipe events.

How to use it:

1. Create a template for the photo gallery.

    <img alt="" loading="lazy">

2. Place your images in the images folder and override the image names in the images.js as follows:

export default [

3. Import the app.js as a module in the document.

<script src="app.js" type="module"></script>

4. The necessary CSS styles for the photo gallery.

html, body {
  height: 100%;
body, ul {
  margin: 0;
ul {
  display: grid;
  height: 100%;
  overflow: auto;
  list-style: none;
  will-change: opacity;
ul img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
#thumbnails {
  --columns: 7;
  --gutter: 20px;
  --size: calc((100vw - (var(--columns) + 1) * var(--gutter)) / var(--columns));
  grid: auto-flow var(--size) / repeat(var(--columns), 1fr);
  gap: var(--gutter);
  padding: var(--gutter);
  box-sizing: border-box;
@media (max-width: 450px) {
  #thumbnails {
    --columns: 3;
    --gutter: 15px;
#scroller {
  grid: 100% / auto-flow 100%;
  scroll-snap-type: x mandatory;
  padding: 0;
#scroller li {
  scroll-snap-align: center;
  scroll-snap-stop: always;
.hidden {
  visibility: hidden;

You Might Be Interested In:

Leave a Reply