例如,如果用户单击框B(它将扩展以占据当前由其自身保留的空间以及框C和F),我如何使用变换将C和F从新占用的空间中滑入当前未占用的空间中网格？
代码如下：
.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>
解决方法
要调整任何网格项的大小和位置,您可以使用已定义的展示位置(而不是自动展示位置).
这里有些例子：
.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>
关于这部分问题：
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-flowcontrols how the auto-placement algorithm works,
specifying exactly how auto-placed items get flowed into the grid.
denseIf 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>
