Combining CSS Grid with transform

Question

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>

Answer 1

The CSS Grid spec provides a multitude of properties and methods for adjusting your layout.

To adjust the size and placement of any grid item, you can use defined placement (as opposed to auto placement).

Here are some examples:

.grid-wrapper {
  display: inline-grid;
  grid-template-columns: repeat(3, 75px);
  grid-template-rows: repeat(3, 75px);
  grid-auto-rows: 75px;
  grid-auto-columns: 75px;
  grid-gap: 10px;
  padding: 10px;
  border: 1px solid black;
}

.a {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.a:hover {
  grid-column: 1 / 4;
  background-color: orange;
}

.b:hover {
  grid-row: 1 / 4;
  grid-column: 1 / 3;
  background-color: aqua;
}

.c:hover~.box {
  grid-column: 1 / 4;
  background-color: pink;
}

.h:hover {
  grid-column-end: span 2;
  background-color: green;
}

.box {
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<div class="grid-wrapper">
  <div class="box a">A<br>hover</div>
  <div class="box b">B<br>hover</div>
  <div class="box c">C<br>hover</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<br>hover</div>
</div>

jsFiddle

---

With regard to this part of your question:

How could I use transforms to slide C and F out of the newly occupied space and into space currently unoccupied within the grid?

The Grid spec actually provides a method for accomplishing this exact behavior.

With grid-auto-flow: dense, the Grid auto-placement algorithm will look to fill unoccupied cells with items that fit.

7.7. Automatic Placement: the grid-auto-flow property

Grid items that aren’t explicitly placed are automatically placed into an unoccupied space in the grid container by the auto-placement algorithm.

grid-auto-flow controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

dense

If specified, the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

In the example below, grid-auto-flow: dense is activated on hover.

.grid-wrapper {
  display: inline-grid;
  grid-template-columns: repeat(5, 50px);
  grid-template-rows: repeat(3, 50px);
  grid-auto-rows: 50px;
  grid-auto-columns: 50px;
  grid-gap: 10px;
  padding: 10px;
  border: 1px solid black;
}

.grid-wrapper:hover {
  grid-auto-flow: dense;
}

.a, .h {
  grid-column-end: span 2;
}

.b, .e {
  grid-row-end: span 2;
}

.f {
  grid-row-end: span 2;
  grid-column-end: span 2;
}

.box {
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.grid-wrapper:hover .g,
.grid-wrapper:hover .h {
  background-color: orange;
}

<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>

jsFiddle