html – 将CSS Grid与变换相结合

概述有没有办法将CSS Grid与变换结合起来在网格布局周围移动div？ 例如,如果用户单击框B(它将扩展以占据当前由其自身保留的空间以及框C和F),我如何使用变换将C和F从新占用的空间中滑入当前未占用的空间中网格？ 代码如下： .grid-wrapper { display: grid; grid-template-columns: repeat(5, 18% 20px); grid-t 有没有办法将CSS GrID与变换结合起来在网格布局周围移动div？

例如,如果用户单击框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 >  <div >A</div>  <div >B</div>  <div >C</div>  <div >D</div>  <div >E</div>  <div >F</div>  <div >G</div>  <div >H</div></div>

解决方法 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 >  <div >A<br>hover</div>  <div >B<br>hover</div>  <div >C<br>hover</div>  <div >D</div>  <div >E</div>  <div >F</div>  <div >G</div>  <div >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 >  <div >A</div>  <div >B</div>  <div >C</div>  <div >D</div>  <div >E</div>  <div >F</div>  <div >G</div>  <div >H</div></div>

@L_404_2@

总结

以上是内存溢出为你收集整理的html – 将CSS Grid与变换相结合全部内容，希望文章能够帮你解决html – 将CSS Grid与变换相结合所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。