How to animate grid layout expansion?
P粉937382230
2023-08-31 21:09:37
<p>I would like to know how to animate the expansion of a grid layout. As you can see in the code, I have 4 divs. Two of them will be displayed, and the other two will only be displayed when the checkbox is selected. </p>
<p>When the checkbox is selected, another row will be added containing div3 and div4. How do I animate the extension? It's best to keep the size of the grid small. I don't want the animation to affect the (non-existent) margins. I also want to do this without JavaScript. is it possible? </p>
<pre class="brush:php;toolbar:false;"><!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="div3">Hello3</div>
<div class="div4">Hello4</div>
</div>
</body>
</html></pre>
<pre class="brush:php;toolbar:false;">.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;
}
.div3 {
display: none;
}
.div4 {
display: none;
}
.toggle:checked ~ .grid > .div3 {
display: block;
grid-column: 1;
grid-row: 2;
}
.toggle:checked ~ .grid > .div4 {
display: block;
grid-column: 2;
grid-row: 2;
}</pre>
<p>I want the div container to slide down to make room for the added rows. thanks for your help. </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.