Animating CSS Grid (Code Example)

In order for this bit to work, you will need to have an element with class of .grid that will contain two children. First child will have id #left, while the second child will have id #right


<style>
.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%;
}
</style>