Grid columns animation using CSS

CSS grids are perfect to strcuture complex layouts, but we can also leverage its capabilities do deliver nice animations on the front-end.

As an example, we can animate two columns. Once I hover one of them, it expands and therefore the other column shrinks. See the demo:

HTML

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

Here's all the CSS you need to make this work. Some of the properties used here are only for styling purposes, so feel free to change them to fit your needs.

.grid {
  height: 300px;
  transition: 300ms;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.item {
  height: 100%;
}

.item:first-child {
  background: #455d7a;
}

.item:last-child {
  background: #f95959;
}

.grid:has(.item:first-child:hover) {
  grid-template-columns: 1.5fr 0.5fr;
}

.grid:has(.item:last-child:hover) {
  grid-template-columns: 0.5fr 1.5fr;
}

Pretty cool, huh?