html – 将CSS Grid与变换相结合

要调整任何网格项的大小和位置,您可以使用已定义的展示位置(而不是自动展示位置).

这里有些例子：

.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

关于这部分问题：

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

Grid规范实际上提供了一种实现这种精确行为的方法.

对于网格自动流：密集,网格自动放置算法将使用适合的项填充未占用的单元格.

07001

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.

在下面的示例中,网格自动流：密集在悬停时激活.

.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