EN VI

CSS Grid - possible to prevent adjacent sibling expanding height?

How to CSS Grid - possible to prevent adjacent sibling expanding height?

Is it possible to prevent the adjacent column in a CSS grid row from expanding to the same height as its sibling when it is being toggled to an expanded state? Ideally I don't have to split the HTML markup into separate left and right columns for this, but I'm not sure if it's possible to avoid it.

Example: 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>

Solution:

Yes, you can update the .product-data .item-wrap CSS to margin-bottom: auto; to keep the other item in the row from growing in height when a column in the row is expanded.

This will remove the spacing between the rows, but you can get that back by using margin-top: 20px; instead