How to make Grid animation with CSS

<div class="grid">
  <div class="col_1"></div>
  <div class="col_2"></div>
  <div class="col_3"></div>
  <div class="col_4"></div>
</div>

.grid {
  height: 450px;
  transition:0.3s ease-in-out;
  display: grid;
  grid-template-columns:25% 25% 25% 25%;
  gap: 4px;
  background: #ced220;
  cursor: pointer;
  overflow: hidden;
}
:where(.col_1, .col_2, .col_3, .col_4) {
  background: #008264;
  transition:0.3s ease-in-out;
}
:where(.col_1, .col_2, .col_3, .col_4):hover {
  background: #ced220;
}
.grid:has(.col_1:hover) {
  grid-template-columns: 40% 20% 20% 20%;
}
.grid:has(.col_2:hover) {
  grid-template-columns: 20% 40% 20% 20%;
}
.grid:has(.col_3:hover) {
  grid-template-columns:20% 20% 40% 20%;
}
.grid:has(.col_4:hover) {
  grid-template-columns:20% 20% 20% 40%;
}