css grid anim

by jpeter06

HTML

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

CSS

/* ignore */
body {  margin: 0;}
#grid {  height: 100vh;}
#left {  background: crimson;}
#right {  background: navajowhite;
  border: 3rem solid rgb(0 0 0 / 10%);}

/* the magic */
#grid {  transition: 300ms;  display: grid;
  grid-template-columns: 48px auto;
}
#grid:has(#left:hover) {  grid-template-columns: 30% auto;}
/* magic + CSS variable 
#grid {  transition: 300ms;  display: grid;
  grid-template-columns: var(--left, 48px) auto;
}

#grid:has(#left:hover) {  --left: 30%;}*/

/*
grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
        "nav nav"
        "navsmall navsmall"
        "news news"
        "menu router";
*/