P粉5295811992023-09-01 15:18:03
The solution is very simple. I put my grid inside another grid. Then I simply used fr as a way to resize the rows on the div where the main grid is. This results in the possibility of converting grid rows from 0fr to 1fr. That's it.
.toggle {
width: 100%;
}
.grid {
display: grid;
width: 20%;
border: solid black 2px;
}
.div1 {
grid-column: 1;
grid-row: 1;
}
.div2 {
grid-column: 2;
grid-row: 1;
}
.wrapper {
grid-column: 1 / 3;
grid-row: 2;
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 200ms;
}
.div3 {
grid-column: 1;
grid-row: 1;
min-height: 0;
}
.div4 {
grid-column: 2;
grid-row: 1;
min-height: 0;
}
.toggle:checked ~ .grid > .wrapper {
grid-template-rows: 1fr;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Website</title>
</head>
<body>
<input class="toggle" type="checkbox">
<div class="grid">
<div class="div1">Hello</div>
<div class="div2">Hello2</div>
<div class="wrapper">
<div class="div3">Hello3</div>
<div class="div4">Hello4</div>
</div>
</div>
</body>
</html>
Also, if you have different rows of different sizes in your grid. For example, one at 0.05fr and one at 1fr, the animation will become "laggy". What you can do is put a wrapper grid inside another wrapper grid. Then, instead of using the actual row to animate that grid, you use the same method to animate the children of the first grid or the parent of the actual grid.
This is a weird workaround, but it's a way to solve the problem without redoing too much.