html – 将CSS Grid与变换相结合

前端之家收集整理的这篇文章主要介绍了html – 将CSS Grid与变换相结合前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法将CSS Grid与变换结合起来在网格布局周围移动div?

例如,如果用户单击框B(它将扩展以占据当前由其自身保留的空间以及框C和F),我如何使用变换将C和F从新占用的空间中滑入当前未占用的空间中网格?

代码如下:

  1. .grid-wrapper {
  2. display: grid;
  3. grid-template-columns: repeat(5,18% 20px);
  4. grid-template-rows: repeat(3,30% 20px);
  5. height: 95vh;
  6. width: 95vw;
  7. }
  1. <div class="grid-wrapper">
  2. <div class="Box a">A</div>
  3. <div class="Box b">B</div>
  4. <div class="Box c">C</div>
  5. <div class="Box d">D</div>
  6. <div class="Box e">E</div>
  7. <div class="Box f">F</div>
  8. <div class="Box g">G</div>
  9. <div class="Box h">H</div>
  10. </div>

解决方法

CSS Grid规范提供了许多用于调整布局的属性方法.

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

这里有些例子:

  1. .grid-wrapper {
  2. display: inline-grid;
  3. grid-template-columns: repeat(3,75px);
  4. grid-template-rows: repeat(3,75px);
  5. grid-auto-rows: 75px;
  6. grid-auto-columns: 75px;
  7. grid-gap: 10px;
  8. padding: 10px;
  9. border: 1px solid black;
  10. }
  11.  
  12. .a {
  13. grid-row: 1 / 2;
  14. grid-column: 1 / 2;
  15. }
  16.  
  17. .a:hover {
  18. grid-column: 1 / 4;
  19. background-color: orange;
  20. }
  21.  
  22. .b:hover {
  23. grid-row: 1 / 4;
  24. grid-column: 1 / 3;
  25. background-color: aqua;
  26. }
  27.  
  28. .c:hover~.Box {
  29. grid-column: 1 / 4;
  30. background-color: pink;
  31. }
  32.  
  33. .h:hover {
  34. grid-column-end: span 2;
  35. background-color: green;
  36. }
  37.  
  38. .Box {
  39. background-color: lightgreen;
  40. display: flex;
  41. align-items: center;
  42. justify-content: center;
  43. text-align: center;
  44. }
  1. <div class="grid-wrapper">
  2. <div class="Box a">A<br>hover</div>
  3. <div class="Box b">B<br>hover</div>
  4. <div class="Box c">C<br>hover</div>
  5. <div class="Box d">D</div>
  6. <div class="Box e">E</div>
  7. <div class="Box f">F</div>
  8. <div class="Box g">G</div>
  9. <div class="Box h">H<br>hover</div>
  10. </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.

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

  1. .grid-wrapper {
  2. display: inline-grid;
  3. grid-template-columns: repeat(5,50px);
  4. grid-template-rows: repeat(3,50px);
  5. grid-auto-rows: 50px;
  6. grid-auto-columns: 50px;
  7. grid-gap: 10px;
  8. padding: 10px;
  9. border: 1px solid black;
  10. }
  11.  
  12. .grid-wrapper:hover {
  13. grid-auto-flow: dense;
  14. }
  15.  
  16. .a,.h {
  17. grid-column-end: span 2;
  18. }
  19.  
  20. .b,.e {
  21. grid-row-end: span 2;
  22. }
  23.  
  24. .f {
  25. grid-row-end: span 2;
  26. grid-column-end: span 2;
  27. }
  28.  
  29. .Box {
  30. background-color: lightgreen;
  31. display: flex;
  32. align-items: center;
  33. justify-content: center;
  34. text-align: center;
  35. }
  36.  
  37. .grid-wrapper:hover .g,.grid-wrapper:hover .h {
  38. background-color: orange;
  39. }
  1. <div class="grid-wrapper">
  2. <div class="Box a">A</div>
  3. <div class="Box b">B</div>
  4. <div class="Box c">C</div>
  5. <div class="Box d">D</div>
  6. <div class="Box e">E</div>
  7. <div class="Box f">F</div>
  8. <div class="Box g">G</div>
  9. <div class="Box h">H</div>
  10. </div>

jsFiddle

猜你在找的HTML相关文章