[DEMO] griddery v1.0 (JQ)

https://waa.ai/griddery_v1

by glenthemes

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//griddery.github.io/grid.js"></script>
<link href="//griddery.github.io/basics.css" rel="stylesheet">

<script>
$(document).ready(function(){
	griddery($("img"),"--Columns");
});
</script>

<img src="https://static.tumblr.com/snld4jp/CMPsi4o4i/malachi-burford-linakdr4k6i-unsplash.jpg">
<img src="https://static.tumblr.com/snld4jp/2IAsi4nhk/benigno-hoyuela-g3mgoqytwd0-unsplash.jpg">
<img src="https://static.tumblr.com/snld4jp/fJlsi4nm5/joao-alexandre-paulo-uyp-qfkg0nq-unsplash.jpg">
<img src="https://static.tumblr.com/snld4jp/sYusi4nnw/ramy-kabalan-k0oehfhx2pw-unsplash.jpg">

<h2>test text — this line won't be wrapped</h2>

<img src="https://static.tumblr.com/snld4jp/Bc8si4nqa/larissa-dupont-tfklqm0e5ri-unsplash.jpg">
<img src="https://static.tumblr.com/snld4jp/qCcsi4nse/michael-chiara-cme2nemxtlo-unsplash.jpg">
<img src="https://static.tumblr.com/snld4jp/Gq8si4ntr/sven-mieke-7r7uopb86jg-unsplash.jpg">

CSS

body {
	margin:0;
}

h2 {
	font-family:sans-serif;
	font-size:0.9rem;
}

:root {
	--Columns:3;
	--Column-Spacing:20px;
	--Item-Spacing:20px;
}

.col-column + .col-column {
	padding-left:var(--Column-Spacing);
}

.col-item + .col-item {
	margin-top:var(--Item-Spacing);
}

img {
	margin:auto;
	width:100%;
}

JavaScript

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

    griddery by @glenthemes [tumblr]
    https://git.new/griddery-v1
    
-----------------------------------------*/