Combining CSS mesh with transform

Question

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

For example, if the user presses Box B (it will expand to occupy the space that is currently held by itself, as well as the C and F fields), how can I use transforms to move C and F from newly occupied space and into space currently not busy in the grid?

Enter the 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 specification provides many properties and methods for customizing the layout.

To adjust the size and placement of any mesh element, you can use a specific placement (as opposed to automatic 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

---

Regarding this part of your question:

How can I use transforms for C and F slides from newly occupied space and to a space that is currently not occupied inside the grid?

The Grid specification actually provides a method for achieving this precise behavior.

With grid-auto-flow: dense the automatic grid layout algorithm will look to fill in unoccupied cells with elements that match.

7.7. Auto Place: grid-auto-flow Property

Grid elements that are explicitly placed are automatically placed in unallocated space in the grid container by automatically placing the algorithm.

grid-auto-flow controls how the auto-layout algorithm works by precisely indicating how automatically placed elements get into the grid.

dense

If specified, the automatic placement algorithm uses a “tight” packing algorithm that attempts to fill holes earlier in the grid if smaller objects appear later. This can lead to the appearance of elements out of turn, when it will fill the holes left by larger objects.

In the example below, grid-auto-flow: dense activated when you mouse over.

 .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