CSS Gallery functionality for practically any SSG

Just recently I was looking for a way on how to simply (without JS) make gallery page for my portfolio and made this css out of many guides on the internet :)

Simply add this to your css code and try playing with it, there are examples in the article below, you need to check them out on a tablet or a PC, on mobile they won’t align due to responsiveness :)

img {
  height: auto;
  max-width: 100%;
  pointer-events: none;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

img[alt~="_gallery"] {
  -moz-box-shadow:    0px 0px 3px rgba(0, 0, 0, .5), 0px 0px 10px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .5), 0px 0px 10px rgba(0, 0, 0, 0.2);
  box-shadow:         0px 0px 3px rgba(0, 0, 0, .5), 0px 0px 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  margin-bottom: 2%;
}

/* Aligning images only on tablet/pc, not mobile. */
@media (min-width: 550px) {
  img[alt~="_gallery"] {
    max-width: 49%;
  }
  img[alt$=">"] {
    float: right;
  }

  img[alt$="<"] {
    float: left;
  }

  img[alt$="><"] {
    display: block;
    margin: auto;
    float: none;
  }
}

/* Cleanup after gallery image */
p::after {
  content: "";
  clear: both;
  display: table;
}

Once added, you can put images to your ‘gallery’ like this

This is the markdown code which gets transformed to gallery below, with two spaces after each line:

![_gallery <](/images/example.jpg)  
![_gallery >](/images/example.jpg)  
![_gallery <](/images/example.jpg)  
![_gallery >](/images/example.jpg)

Testing with two spaces after

_gallery <
_gallery >
_gallery <
_gallery >

This is the markdown code which gets transformed to gallery below, without two spaces after each line:

![_gallery <](/images/example.jpg)
![_gallery >](/images/example.jpg)
![_gallery <](/images/example.jpg)
![_gallery >](/images/example.jpg)

Testing without two spaces after

_gallery < _gallery > _gallery < _gallery >

powered by Disqus