CSS 网格 - 可以防止相邻兄弟扩展高度吗？

Question

当CSS网格行切换到展开状态时，是否可以防止CSS网格行中的相邻列展开到与其同级相同的高度？理想情况下，我不必为此将 HTML 标记拆分为单独的左列和右列，但我不确定是否可以避免它。

示例：https://jsfiddle.net/qmLo5y2f/

.product-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 50px;
    margin-top: 30px;
}

.product-data .item-wrap {
    padding: 8px 12px;
    margin-bottom: 20px;
    border: 1px solid #E2DFCC;
}

.product-data .item-content {
    padding: 20px 0;
    border: 1px solid black;
}

 <details class="item-wrap">
    <summary class="item-label">
      Details </summary>
    <div class="item-content">

      <div class="description">
        <div class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat mauris id lacus lacinia lacinia. Cras arcu sem, tincidunt eget purus eget, scelerisque eleifend nisl. In hac habitasse platea dictumst. Integer vitae eros ullamcorper, lobortis magna a, cursus velit. Sed sodales tellus lorem, a ultrices libero molestie vel. Sed nisl elit, aliquet et dapibus sit amet, tristique eget ipsum. Donec sed elit orci. Integer sodales arcu nisi, at euismod dui tincidunt at. Aenean non elit vitae arcu scelerisque interdum eget ut orci. Integer fermentum nibh urna, id volutpat nulla lobortis sit amet. Nulla ac aliquet quam, vitae condimentum ipsum. Vestibulum et tortor tellus.</div>
      </div>
    </div>
  </details>
  <details class="item-wrap">
    <summary class="item-label">
      Details </summary>
    <div class="item-content">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat mauris id lacus lacinia lacinia. Cras arcu sem, tincidunt eget purus eget, scelerisque eleifend nisl. In hac habitasse platea dictumst. Integer vitae eros ullamcorper, lobortis magna a, cursus velit. Sed sodales tellus lorem, a ultrices libero molestie vel. Sed nisl elit, aliquet et dapibus sit amet, tristique eget ipsum. Donec sed elit orci. Integer sodales arcu nisi, at euismod dui tincidunt at. Aenean non elit vitae arcu scelerisque interdum eget ut orci. Integer fermentum nibh urna, id volutpat nulla lobortis sit amet. Nulla ac aliquet quam, vitae condimentum ipsum. Vestibulum et tortor tellus.
      </div>
    </div>
  </details>
  <details class="item-wrap">
    <summary class="item-label">
      Details </summary>
    <div class="item-content">

      <div class="description">
        <div class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat mauris id lacus lacinia lacinia. Cras arcu sem, tincidunt eget purus eget, scelerisque eleifend nisl. In hac habitasse platea dictumst. Integer vitae eros ullamcorper, lobortis magna a, cursus velit. Sed sodales tellus lorem, a ultrices libero molestie vel. Sed nisl elit, aliquet et dapibus sit amet, tristique eget ipsum. Donec sed elit orci. Integer sodales arcu nisi, at euismod dui tincidunt at. Aenean non elit vitae arcu scelerisque interdum eget ut orci. Integer fermentum nibh urna, id volutpat nulla lobortis sit amet. Nulla ac aliquet quam, vitae condimentum ipsum. Vestibulum et tortor tellus.</div>
      </div>
    </div>
  </details>
  <details class="item-wrap">
    <summary class="item-label">
      Title </summary>
    <div class="item-content">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat mauris id lacus lacinia lacinia. Cras arcu sem, tincidunt eget purus eget, scelerisque eleifend nisl. In hac habitasse platea dictumst. Integer vitae eros ullamcorper, lobortis magna a, cursus velit. Sed sodales tellus lorem, a ultrices libero molestie vel. Sed nisl elit, aliquet et dapibus sit amet, tristique eget ipsum. Donec sed elit orci. Integer sodales arcu nisi, at euismod dui tincidunt at. Aenean non elit vitae arcu scelerisque interdum eget ut orci. Integer fermentum nibh urna, id volutpat nulla lobortis sit amet. Nulla ac aliquet quam, vitae condimentum ipsum. Vestibulum et tortor tellus.
      </div>
    </div>
  </details>
  
</div>

Answer 1

是的，您可以更新为

margin-bottom: auto;

，以防止当行中的另一列展开时，行中的其他项目的高度增加。

这将消除行之间的间距，但您可以使用

margin-top: 20px;

来恢复行间距