I have created several blocks within a CSS grid layout structured as shown:
$('.box').click(function(){
$(this).toggleClass("active");
});.grid-container {
display: grid;
grid-template-columns: repeat(14, 1fr);
grid-template-rows: repeat(10, 1fr);
gap: 20px;
height: calc(100vh - 40px);
width: calc(100vw - 40px);
margin: 20px;
}
.box{
width:100%;
height:100%;
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: 1 / span 2;
grid-row: 1 / span 2;
background: linear-gradient(to right, #ffb347, #ffcc33);
}
.item-2 {
grid-column: 13 / span 2;
grid-row: 1 / span 2;
background: linear-gradient(to right, #ffb347, #ffcc33);
opacity: 0.8;
}
.item-3 {
grid-column: 3 / span 2;
grid-row: 8 / span 2;
background: linear-gradient(to top, #d38312, #a83279);
z-index: 1;
opacity: 0.8;
}
.item-4 {
grid-column: 1 / span 2;
grid-row: 5 / span 2;
background: linear-gradient(to left, #b3ffab, #12fff7);
}
.item-5 {
grid-column: 13 / span 2;
grid-row: 9 / span 2;
background: linear-gradient(to top, #485563, #29323c);
}
.item-6 {
grid-column: 4 / span 2;
grid-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>When a user clicks on one of the colored boxes, I would like it to expand and move across the screen to cover 100% of the height and width.
Currently, clicking on each box makes it expand to 100vh and 100vw, but due to its static positioning within the CSS grid, I am unable to move it to cover the entire screen.
If I apply position:absolute to .box.active, the transition is not smooth and appears unattractive. If I use position:absolute on .box, then the .box elements are no longer positioned within the grid...
Is there an elegant solution that allows the boxes to remain in the grid and expand/move to fill the entire screen when clicked? Any suggestions are welcome.