example 1
example 2

Grid Markup

#grid {
  height: 50vh;
  transition: 500ms;
  display: grid;
  justify-content: center;
  // grid-template-columns: 1fr  1fr  1fr  1fr;
  grid-template-columns: repeat(auto-fit, minmax(307px, 1fr));
  gap: 2em;
  padding: 2em;
}

Grid Animation

:where(.left, .center, .right, .last) {
  border-radius: 1em;
  padding: 2em;
  background: #202020;
  // transition: 300ms;
  transition: 1s;
}

:where(.left, .center, .right, .last):hover {
  background-blend-mode: hue;
  // background: crimson;
}

#grid:has(.left:hover) {
  grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr;
}

#grid:has(.center:hover) {
  grid-template-columns: 0.5fr 1fr 0.5fr 0.5fr;
}

#grid:has(.right:hover) {
  grid-template-columns: 0.5fr 0.5fr 1fr 0.5fr;
}

#grid:has(.last:hover) {
  grid-template-columns: 0.5fr 0.5fr 0.5fr 1fr;
}

I’ve tried to change 1fr to px or em but I still can’t get it to work when I have the :hover on. I don’t want to use media queries but if I have to I’d rather have it be for the smallest break point. Any ideas for a solution?