I am facing a peculiar issue with my layout. When I specify grid-template-rows: 1fr 1fr and try to open the details element, instead of smoothly expanding downwards, it seems to "jump" into position. This odd behavior disappears when I use grid-template-rows: auto. However, if I do need to explicitly set the rows, how can I prevent this jumpy effect and ensure that the element opens normally?
main {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 2px 2px;
align-items: stretch;
justify-content: stretch;
grid-auto-flow: row;
justify-content: stretch;
}<main>
<p>Paragraph 1.</p>
<details>
<summary>Jumpy summary</summary>
<ul>
<li>Line 1.</li>
<li>Line 2.</li>
<li>Line 3.</li>
<li>Line 4.</li>
<li>Line 5.</li>
<li>Line 6.</li>
<li>Line 7.</li>
<li>Line 8.</li>
<li>Line 9.</li>
<li>Line 10.</li>
</ul>
</details>
</main>