Search code examples
css

How to make elements equal height (same height as the heighest) in a column of vertically stacked boxes


I have a list of vertically stacked boxes with dynamic heights. I would like each box to be as heigh as the heighest of them. How can I do that using display grid?

Here's what I have - I would like box 1 to always be as heigh as box 2 - or vice versa:

.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 1rem;
}

.box {
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 1rem;
}
<div class="container">
  <div class="box">
    <strong>Box 1:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
  <div class="box">
    <strong>Box 2:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
</div>
EDIT: I'm not looking for a spread evenly height solution. Thanks :-)


Solution

  • Add grid-auto-rows: 1fr

    .container {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-auto-rows: 1fr;
      row-gap: 1rem;
    }
    
    .box {
      border: 1px solid #ddd;
      padding: 1rem;
      margin-bottom: 1rem;
    }
    <div class="container">
      <div class="box">
        <strong>Box 1:</strong>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
      </div>
      <div class="box">
        <strong>Box 2:</strong>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
      </div>
    </div>