I’m trying to achieve following grid:
Backup image link in case above fails
HTML structure is following:
<div class="container">
<article>
<div class="wrapper">
<span class="header">Banner</span>
<div class="item-layout">
<header>header</header>
<div class="body">content to be expanded</div>
<footer>footer</footer>
</div>
</div>
</article>
<article>
<div class="wrapper">
<div class="item-layout">
<header>header</header>
<div class="body">content to be expanded</div>
<footer>footer</footer>
</div>
</div>
</article>
<article>
<div class="wrapper">
<div class="item-layout">
<header>header</header>
<div class="body">content to be expanded</div>
<footer>footer</footer>
</div>
</div>
</article>
<article>
<div class="wrapper">
<span class="header">Banner</span>
<div class="item-layout">
<header>header</header>
<div class="body">content to be expanded</div>
<footer>footer</footer>
</div>
</div>
</article>
<article>
<div class="wrapper">
<div class="item-layout">
<header>header</header>
<div class="body">content to be expanded</div>
<footer>footer</footer>
</div>
</div>
</article>
</div>Height of items in the row should be the same with conditional banner sticking outside the item. Items might have different content, so I can’t set height explicitly. Instead I want to use flex-grow to “body” of item to expand it if necessary.
Using grid for “container” and flex, flex-direction: column and justify-content: flex-end for “wrapper” I was able to do it, but it fails if there is not enough content in item in the row, items will be uneven.
To overcome this, I used flex-grow to “body” and “item-layout”. Now items are even, but item with “banner” are aligned to other items without banner.
Any idea on how to do this without explicitly setting height and min-height?