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

Question

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

$('.box').click(function(){
$(this).toggleClass("active");
});

.grid-container {
display: grid;
grid-template: repeat(10, [row] 1fr) / repeat(14, [col] 1fr);
grid-gap: 20px;
height: calc(100vh - 40px);
width: calc(100vw - 40px);
margin:20px;
}
.box{
width:100%;
height:100%;
-webkit-transition: all 1s;
transition: all 1s;
opacity: 1;
z-index:1;
font-size: 10px;
line-height: 1;
color: white;
background-color:#ebebeb;

}
.box.active{
width:100vw;
height:100vh;
z-index:50;
}
.item-1 {
grid-column: col 1 / span 2;
grid-row: row 1 / span 2;
background: linear-gradient(to right, #ffb347, #ffcc33);
}
.item-2 {
grid-column: col 13 / span 2;
grid-row: row 1 / span 2;
background: linear-gradient(to right, #ffb347, #ffcc33);
opacity: 0.8;
}
.item-3 {
grid-column: col 3 / span 2;
grid-row: row 8 / span 2;
background: linear-gradient(to top, #d38312, #a83279);
z-index: 1;
opacity: 0.8;
}
.item-4 {
grid-column: col 1 / span 2;
grid-row: row 5 / span 2;
background: linear-gradient(to left, #b3ffab, #12fff7);
}
.item-5 {
grid-column: col 13 / span 2;
grid-row: row 9 / span 2;
background: linear-gradient(to top, #485563, #29323c);
}
.item-6 {
grid-column: col 4 / span 2;
grid-row: row 2 / span 2;
background: linear-gradient(to right, #fe8c00, #f83600);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-container">
<div class="box item-1">1</div>
<div class="box item-2">2</div>
<div class="box item-3">3</div>
<div class="box item-4">4</div>
<div class="box item-5">5</div>
<div class="box item-6">6</div>
</div>

当用户单击其中一个彩色框时，我希望它展开并在屏幕上滑动，以填充屏幕的100%高度和宽度。

目前，当点击时，每个框都会扩展到100vh和100vw，但因为它是静态定位在CSS网格上的，我无法移动它来覆盖屏幕。

如果我使用position:absolute on.box.active，则过渡不平滑，看起来非常难看。如果我在.box上使用position:absolute，那么.boxdiv就不再位于网格中。。。

有没有一个优雅的解决方案可以让方框保持在网格中，但当单击时可以展开并移动以填充整个屏幕？任何想法都值得赞赏。

Answer 1

有点古怪(我去掉了那个讨厌的jQuery:p(，但试试。。。

function bigger() {
if (this.classList.contains('active')) {
this.classList.remove('active')
} else {
this.classList.add('active');
}
}
		
const el = document.querySelectorAll('.box');
const elArray = [...el];
elArray.forEach(el => {
el.addEventListener('click', bigger);
});

.grid-container {
display: grid;
grid-template: repeat(10, [row] 1fr) / repeat(14, [col] 1fr);
grid-gap: 20px;
height: calc(100vh - 40px);
width: calc(100vw - 40px);
margin:20px;
overflow: hidden;
}
.box {
height: 100%;
width: 100%;
opacity: 1;
z-index:1;
font-size: 10px;
line-height: 1;
color: white;
transition: 1s;
background-color:#ebebeb;
}
.box.active {
transform: scale3d(20, 20, 1);
transform-origin: center;
z-index:50;
}
.item-1 {
grid-column: col 1 / span 2;
grid-row: row 1 / span 2;
background: linear-gradient(to right, #ffb347, #ffcc33);
}
.item-2 {
grid-column: col 13 / span 2;
grid-row: row 1 / span 2;
background: linear-gradient(to right, #ffb347, #ffcc33);
opacity: 0.8;
}
.item-3 {
grid-column: col 3 / span 2;
grid-row: row 8 / span 2;
background: linear-gradient(to top, #d38312, #a83279);
z-index: 1;
opacity: 0.8;
}
.item-4 {
grid-column: col 1 / span 2;
grid-row: row 5 / span 2;
background: linear-gradient(to left, #b3ffab, #12fff7);
}
.item-5 {
grid-column: col 13 / span 2;
grid-row: row 9 / span 2;
background: linear-gradient(to top, #485563, #29323c);
}
.item-6 {
grid-column: col 4 / span 2;
grid-row: row 2 / span 2;
background: linear-gradient(to right, #fe8c00, #f83600);
}

<div class="grid-container">
<div class="box item-1">1</div>
<div class="box item-2">2</div>
<div class="box item-3">3</div>
<div class="box item-4">4</div>
<div class="box item-5">5</div>
<div class="box item-6">6</div>
</div>

Answer 2

试试这个：

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