CSS网格中的静态Div转换为填充屏幕

我在CSS网格布局中创建了许多块，如下所示：

$（'.box'）。单击（函数（）{
$（此）.toggleClass（“活动”）；
});
.grid容器{
显示：网格；
网格模板：重复（10，[row]1fr）/重复（14，[col]1fr）；
栅隙：20px；
高度：计算（100vh-40px）；
宽度：计算（100vw-40px）；
利润率：20px；
}
.盒子{
宽度：100%；
身高：100%；
-webkit转换：所有1；
过渡：所有1；
不透明度：1；
z指数：1；
字体大小：10px；
线高：1；
颜色：白色；
背景色：#ebebebeb；
}
.box.active{
宽度：100vw；
高度：100vh；
z指数：50；
}
.项目-1{
网格柱：第1列/第2跨；
网格行：第1行/跨度2；
背景：线性梯度（向右，#ffb347，#ffcc33）；
}
.项目-2{
网格柱：col 13/span 2；
网格行：第1行/跨度2；
背景：线性梯度（向右，#ffb347，#ffcc33）；
不透明度：0.8；
}
.项目-3{
网格柱：第3列/第2跨；
网格行：第8行/跨度2；
背景：线性梯度（至顶部，#d38312，#a83279）；
z指数：1；
不透明度：0.8；
}
.项目-4{
网格柱：第1列/第2跨；
网格行：第5行/跨度2；
背景：线性梯度（向左，#b3ffab，#12fff7）；
}
.项目-5{
网格柱：col 13/span 2；
网格行：第9行/跨度2；
背景：线性梯度（至顶部，#485563，#29323c）；
}
.项目-6{
网格柱：col 4/span 2；
网格行：第2行/跨度2；
背景：线性梯度（向右，#fe8c00，#f83600）；
}

1.
2.
3.
4.
5.
6.
试试这个：

.box.active{
  width:100%;
  height:100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index:50;
}

有点不对劲（我去掉了那个讨厌的jQuery:p），但试试看


函数（）{
if（this.classList.contains（'active'））{
this.classList.remove（'active'）
}否则{
this.classList.add（'active'）；
}
}
const el=document.queryselectoral（'.box'）；
常数=[…el]；
elArray.forEach（el=>{
el.addEventListener（“点击”，较大）；
});
.grid容器{
显示：网格；
网格模板：重复（10，[row]1fr）/重复（14，[col]1fr）；
栅隙：20px；
高度：计算（100vh-40px）；
宽度：计算（100vw-40px）；
利润率：20px；
溢出：隐藏；
}
.盒子{
身高：100%；
宽度：100%；
不透明度：1；
z指数：1；
字体大小：10px；
线高：1；
颜色：白色；
过渡：1s；
背景色：#ebebebeb；
}
.box.active{
变换：scale3d（20,20,1）；
变换原点：中心；
z指数：50；
}
.项目-1{
网格柱：第1列/第2跨；
网格行：第1行/跨度2；
背景：线性梯度（向右，#ffb347，#ffcc33）；
}
.项目-2{
网格柱：col 13/span 2；
网格行：第1行/跨度2；
背景：线性梯度（向右，#ffb347，#ffcc33）；
不透明度：0.8；
}
.项目-3{
网格柱：第3列/第2跨；
网格行：第8行/跨度2；
背景：线性梯度（至顶部，#d38312，#a83279）；
z指数：1；
不透明度：0.8；
}
.项目-4{
网格柱：第1列/第2跨；
网格行：第5行/跨度2；
背景：线性梯度（向左，#b3ffab，#12fff7）；
}
.项目-5{
网格柱：col 13/span 2；
网格行：第9行/跨度2；
背景：线性梯度（至顶部，#485563，#29323c）；
}
.项目-6{
网格柱：col 4/span 2；
网格行：第2行/跨度2；
背景：线性梯度（向右，#fe8c00，#f83600）；
}

1.
2.
3.
4.
5.
6.
取
高度：100vh和<代码>宽度：100vw输出和外接程序
网格区域：1/1/-1/-1
到
框。active
感谢这一有用的技术-但有没有办法实现这一点，使框在变大时平滑过渡并在屏幕上滑动，而不是跳转到更大的尺寸？在做了一些研究之后，我认为网格属性在大多数浏览器中还不能设置动画。有一种方法可以用javascript实现这一点。我看看能不能想出点什么来。我在container div上尝试了网格的所有变体，但通过CSS似乎什么都不起作用。这很好-但我想要一个平滑的过渡，框从当前位置滑动以填充屏幕-这种方法可行吗？这是一个很好的简单解决方案，谢谢。如果我是正确的，另一种更复杂但更精确的方法是使用jQuery.offset（）并将一个新div从每个项的坐标滑动到每个项的坐标。active。在接下来的几天里，当我有更多的时间时，我会尝试整理一个例子。