Question 358032 in CSS Question posted in
Some basic documentation can be found here.

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

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    You may have put a margin bottom on for some other reason but it seems like you should instead have grid-row-gap: 1.25em; on the grid then you can put the bottom margin as auto instead which will size each to the content.

    • I set the font size to most browsers default 16px then use em as a more modern approach
    • Changed the bottom margin margin-bottom: auto;
    • set that row gap to the same as what the bottom margin was before but put it on the grid instead grid-row-gap: 1.25em;
    • Adjusted the second elements content to illustrate that difference when both are expanded
    • Fixed the broken markup

    Note this is not truly the "sibling" but the content of the sibling perhaps.

    body {
  font-size: 16px;
}

.product-data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 3.125em;
  grid-row-gap: 1.25em;
  margin-top: 1.875em;
}

.product-data .item-wrap {
  padding: 0.5em 0.75em;
  margin-bottom: auto;
  border: 1px solid #E2DFCC;
}

.product-data .item-content {
  padding: 1.25em 0;
  border: 1px solid black;
}
    <div class="product-data">
  <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. 
      </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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search