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