Combining CSS Grid with transform

Is there any way to combine CSS Grid with transforms to move divs around a grid layout?

For example, if the user clicks Box B (it would expand to occupy the space currently held by itself and boxes C and F) , how could I use transforms to slide C and F out of the newly occupied space and into space currently unoccupied within the grid?

Code as follows:

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 18% 20px);
  grid-template-rows: repeat(3, 30% 20px);
  height: 95vh;
  width: 95vw;
}

<div class="grid-wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
</div>

Combining CSS Grid with transform

1 Answers