[DEMO] griddery v2.0 (JQ)

https://waa.ai/griddery#readme

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(){
	gridderyV2("img[cat]", "--Cat-Columns");
	gridderyV2("img[dog]", "--Dog-Columns");
	
	// for demo use only
	// to showcase their names
	// to reflect that the left-to-right order is kept
	$("img[cat], img[dog]").each(function(){
		if($(this).is("[name]")){
			var nom = $(this).attr("name");
			$(this).after("<div label>" + nom + "</div>")
		}
	})
});
</script>

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

<h2>
(some text as a separator)
</h2>

<img src="https://static.tumblr.com/snld4jp/MQesi4ofm/adam-grabek-jcxanper2xi-unsplash.jpg" dog name="Alice">
<img src="https://static.tumblr.com/snld4jp/6Ltsi4oh6/angel-luciano-yi_iwr_12ke-unsplash.jpg" dog name="Benjamin">
<img src="https://static.tumblr.com/snld4jp/XhVsi4oif/ian-dooley-5kmrpfjitsc-unsplash.jpg" dog name="Celestina">
<img src="https://static.tumblr.com/snld4jp/oEZsi4ol7/tadeusz-lakota-8jykykpzqmm-unsplash.jpg" dog name="Dorothy">
<img...

CSS

:root {
	--Cat-Columns:3;
	--Cat-Columns-Spacing:10px;
	--Cat-Rows-Spacing:10px;
	
	--Dog-Columns:2;
	--Dog-Columns-Spacing:10px;
	--Dog-Rows-Spacing:10px;
}

/* ----- CATS ----- */

/* column spacing */
[griddery-id="img[cat]"]
[griddery-col] + [griddery-col]{
padding-left:var(--Cat-Columns-Spacing)
}

/* "row" spacing */
[griddery-id="img[cat]"]
[griddery-item] + [griddery-item]{
margin-top:var(--Cat-Rows-Spacing)
}

/* ----- DOGS ----- */

/* column spacing */
[griddery-id="img[dog]"]
[griddery-col] + [griddery-col]{
	padding-left:var(--Dog-Columns-Spacing)
}

/* "row" spacing */
[griddery-id="img[dog]"]
[griddery-item] + [griddery-item]{
	margin-top:var(--Dog-Rows-Spacing)
}

/* demo stuff */
[griddery-item]{
	position:relative;
}

[label]{
	position:absolute;
	top:0;left:0;
	font-size:0.69rem;
	line-height:1em;
	font-family:monospace;
	padding:5px 7px;
	background:#232529;
	color:#e8e7ec;
	z-index:9;
}

img[cat], img[dog]{
	display:block;
	vertical-align:middle;
}

body {margin:10px}

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

JavaScript

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

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