Grid item content "jumps" when opened

Question

I have a simple arrangement like this. When I include grid-template-rows: 1fr 1fr and open the details element, instead of opening downwards, it "jumps" in its place. This does not have if I set grid-template-rows: auto. But if I were to need set it explicitly, how to remove this "jumping" so that the element would still open 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>

score 3 · Accepted Answer · answered Feb 14 '22 at 22:14

When using grid-template-rows: 1fr 1fr you're setting two rows to be equal height.

So when the "Jumpy summary" section is collapsed, it's height is equal to the Paragraph item.

But when the section is expanded, the Paragraph item expands to meet the height of its sibling. That shifts the Jumpy summary half way down the screen.

The behavior is explained in detail here: Equal height rows in CSS Grid Layout

Use grid-template-rows: auto auto instead.

main {
  display: grid;
  grid-template-rows: auto auto;
  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>

Grid item content "jumps" when opened

1 Answers1