例如,如果用户单击框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;
- }
解决方法
要调整任何网格项的大小和位置,您可以使用已定义的展示位置(而不是自动展示位置).
这里有些例子:
- .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;
- }
关于这部分问题:
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;
- }