[DEMO] griddery v4.0

by glenthemes

HTML

<!--✻✻✻✻✻✻  griddery by @glenthemes  ✻✻✻✻✻✻-->
<script src="//griddery.github.io/grid.js"></script>
<link href="//griddery.github.io/basics.css" rel="stylesheet">

<script>
document.addEventListener("DOMContentLoaded", () => {
  /*----- 🐱 CATS GRID 🐱 -----*/
  gridderyV4({
    gridAlign: "top", // "top", "middle", "bottom"
    items: "img[cat]",
    columns: 3,
    responsive: {
      breakpoints: {
        "min-width: 500px": 3,
        "max-width: 500px": 2,
        "max-width: 400px": 1
      }
    }
  })

  /*----- 🐶 DOGS GRID 🐶 -----*/
  gridderyV4({
    gridAlign: "top", // "top", "middle", "bottom"
    items: "img[dog]",
    columns: 2,
    responsive: {
      breakpoints: {
        "min-width: 500px": 2,
        "max-width: 375px": 1
      }
    }
  })
})
</script>

<h3>Images in this demo are all from Unsplash.</h3>

<!----- 🐱 CAT IMAGES 🐱 ----->
<img src="//static.tumblr.com/snld4jp/CMPsi4o4i/malachi-burford-linakdr4k6i-unsplash.jpg" cat name="Alexander" alt="Cat">
<img src="//static.tumblr.com/snld4jp/2IAsi4nhk/benigno-hoyuela-g3mgoqytwd0-unsplash.jpg" cat name="Bumblebee" alt="Cat">
<img src="//static.tumblr.com/snld4jp/fJlsi4nm5/joao-alexandre-paulo-uyp-qfkg0nq-unsplash.jpg" cat name="Cheshire" alt="Cat">
<img src="//static.tumblr.com/snld4jp/sYusi4nnw/ramy-kabalan-k0oehfhx2pw-unsplash.jpg" cat name="Derrick" alt="Cat">
<img src="//static.tumblr.com/snld4jp/Bc8si4nqa/larissa-dupont-tfklqm0e5ri-unsplash.jpg" cat name="Emilia" alt="Cat">
<img src="//static.tumblr.com/snld4jp/qCcsi4nse/michael-chiara-cme2nemxtlo-unsplash.jpg" cat name="Francis" alt="Cat">
<img src="//static.tumblr.com/snld4jp/Gq8si4ntr/sven-mieke-7r7uopb86jg-unsplash.jpg" cat name="Goose" alt="Cat">

<h3>
(some text as a separator. this won't be grouped)
</h3>

<!----- 🐶 DOG IMAGES 🐶 ----->
<img src="//static.tumblr.com/snld4jp/MQesi4ofm/adam-grabek-jcxanper2xi-unsplash.jpg" dog name="Alice" alt="Dog">
<img...

CSS

/*----- 🐱 CATS GRID 🐱 -----*/
/* cats grid spacing */
[griddery-id="img[cat]"]{
  --Griddery-Gap:10px;
}

/*----- 🐶 DOGS GRID 🐶 -----*/
/* dogs grid spacing */
[griddery-id="img[dog]"]{
  --Griddery-Gap:20px;
}

JavaScript

/*-------------------------------------------

    griddery (v4) by @glenthemes [tumblr]
    https://git.new/griddery
    
-------------------------------------------*/