打开时网格项目内容“跳跃”答案

【问题标题】：Grid item content "jumps" when opened打开时网格项目内容“跳跃”
【发布时间】：2022-02-15 07:12:03
【问题描述】：

我有一个这样的简单安排。当我包含grid-template-rows: 1fr 1fr 并打开details 元素时，它不是向下打开，而是在其位置“跳跃”。如果我设置grid-template-rows: auto，则没有。但是如果我需要显式设置它，如何去除这种“跳跃”，使元素仍然可以正常打开？

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>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

使用grid-template-rows: 1fr 1fr 时，您将两行设置为相等的高度。

所以当“Jumpy 摘要”部分被折叠时，它的高度等于段落项。

但是当部分展开时，段落项会展开以满足其兄弟项的高度。这会将 Jumpy 摘要移动到屏幕的一半。

这里详细解释了该行为：Equal height rows in CSS Grid Layout

请改用grid-template-rows: auto auto。

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>

【讨论】：