css grid anim

by jpeter06

HTML

<div id="grid">
</div>

<template id="content1">
  <div>
  adsf asd fa sdasdf asd fa sdf asd fa sdf
  asdfasdfasd fasdfsda
  asdfasdfasd fasdfasd
  asdfasdfasd fasdfsda
  asdfasdfasd fasdfsda
  asdfasdfasd fasdfsda
  asdfasdfasd fasdfsda
  asdfasdfasd fasdfsda
  asdfasdfasd fasdfsda
  asdfasdfasd fasdfsda
  asdfasdfasd fasdfsda
  asdfasdfasd fasdfsda
  asdfasdfasd fasdfsda
  asdfasdfasd asdfads
  fasdfasdfas dfdasf
   asdfa asdf as asdf a fas fas sa
   asdf asdfasdf asdsd as faa sadsf ad 
   adf asd af as as fas fas f
   33333333333 333
   4444444444 4444
   asdf asdf asd
  </div>
</template>
<template id="content2">
  <div>
   33333333333 333
   4444444444 4444
   asdf asdf asd
  </div>
</template>

CSS

/* ignore */
body, html {  margin: 0; padding:0; font-family:sans-serif;
              width:100%; height:100%;
              --color:50, 0%; /*the base color*/
              --l:90%; /*the initial lightness*/}

#grid  div:nth-child(1) { background:hsl(var(--color),var(--l));}
#grid  div:nth-child(2) { background:hsl(var(--color),calc(var(--l) - 5%));}
#grid  div:nth-child(3) { background:hsl(var(--color),calc(var(--l) - 10%));}
#grid  div:nth-child(4) { background:hsl(var(--color),calc(var(--l) - 15%));}
#grid  div:nth-child(5) { background:hsl(var(--color),calc(var(--l) - 20%));}
#grid  div:nth-child(6) { background:hsl(var(--color),calc(var(--l) - 25%));}
#grid  div:nth-child(7) { background:hsl(var(--color),calc(var(--l) - 30%));}
#grid  div:nth-child(8) { background:hsl(var(--color),calc(var(--l) - 35%));}
#grid  div:nth-child(9) { background:hsl(var(--color),calc(var(--l) - 40%));}

#grid div{ cursor:zoom-in;   user-select:none}
#grid div:active{ cursor:zoom-out}
/* the magic */
#grid {  transition: 600ms;   gap: 0.2rem;
  --percent:60%;
  --noHover:20%;
  --default:1fr;
  height: 100%;
  overflow-y:auto;
  display: grid;
  grid-template-columns: var(--default) var(--default) var(--default);
  grid-template-rows: var(--default) var(--default) var(--default);
}
#grid:has(#child_0:hover)  {  
grid-template-columns: var(--percent) var(--noHover) var(--noHover);
grid-template-rows: var(--percent) var(--noHover) var(--noHover);
}
#grid:has(div:nth-child(1):active) {  
grid-template-columns: var(--percent) auto auto;
grid-template-rows: var(--percent) auto auto;
}
#grid:has(div:nth-child(2):active) {  
grid-template-columns: auto var(--percent) auto;
grid-template-rows: var(--percent) auto auto;
}
#grid:has(div:nth-child(3):active) {  
grid-template-columns: auto  auto var(--percent);
grid-template-rows: var(--percent) auto auto;
}
#grid:has(div:nth-child(4):active) {  
grid-template-columns:  var(--percent) auto  auto;
grid-template-rows: auto var(--percent)...

JavaScript

const grid = document.querySelector("#grid");
const content1 = document.querySelector('#content1');
const content2 = document.querySelector('#content2');

for(var i=0; i< 5; i++){
	var docFragment = document.importNode(content1.content, true);
	var div = docFragment.querySelector('div');
  div.id = 'child_' + i;
	grid.appendChild(docFragment);
}
for(var i=5; i< 9; i++){
	var docFragment = document.importNode(content2.content, true);
	var div = docFragment.querySelector('div');
  div.id = 'child_' + i;
	grid.appendChild(docFragment);
}