如何制作网格布局扩展的动画？
<p>我想知道如何为网格布局的扩展设置动画。正如你在代码中看到的，我有 4 个 div。其中两个会显示，另外两个仅在选中该复选框时才显示。</p>
<p>选中该复选框后，将添加另一行，其中包含 div3 和 div4。我如何使扩展动画化？最好保持网格的大小。我不希望动画影响（不存在的）边距。我也想在没有 JavaScript 的情况下做到这一点。可能吗？</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>我希望 div 容器向下滑动，为添加的行腾出空间。感谢您的帮助。</p>
