Seeking a way to design a grid layout that automatically adjusts the height of child divs to match the tallest one in each row. In a 2x2 grid scenario, where each div contains text, the div with the most content should determine the height for the rest.
I've managed to make the div heights align within each row using display: flex; and flex-wrap: wrap;, but now I need all rows to have matching heights.
Wondering if this goal can be achieved through CSS alone or if jQuery will be necessary?
<section class="grid two">
<div>
<div>
<p>The top left div</p>
</div>
</div>
<div>
<div>
<p>The top right div</p>
</div>
</div>
<div>
<div>
<p>The bottom left div</p>
</div>
</div>
<div>
<div>
<p>The bottom right div</p>
<p>This has more text and should stretch others to match its height.</p>
</div>
</div>
</section>
Current CSS code:
.grid {
display: flex;
flex-wrap: wrap;
}
.grid > div {
box-sizing: border-box;
display: flex;
flex-directon: column;
padding: 10px;
width: 50%;
}
.grid > div > div {
background: #EEE;
flex: 1 1 auto;
width: 100%;
}
See live example on Fiddle: http://jsfiddle.net/g41xas6w/
Update 1: Fixed height not an option for two reasons:
- The client may edit text, so the height is unknown.
- This site is responsive, requiring extensive adjustments to maintain proper display height.