CSS Grid animation #2: expanding columns

css-grid-animation-2-expanding-columns.markdown

CSS Grid animation #2: expanding columns

A Pen by Daniel Schwarz on CodePen.

License.

index.html

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

style.css

body {
  margin: 0;
}

#grid {
  height: 100vh;
  transition: 500ms;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  background: crimson;
}

:where(.left, .center, .right) {
  background: navajowhite;
  transition: 300ms;
}

:where(.left, .center, .right):hover {
  background: crimson;
}

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

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