I'm trying to achieve following grid:
HTML structure is following:
.container { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}.container > article { display: flex; margin-top: auto;}.item-layout { border: solid 1px;}.banner { background: red;}<div class="container"><article><div class="wrapper"><span class="banner">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 and more content, Lorem ipsum dolor sit amet, consectetur</div><footer>footer</footer></div></div></article><article><div class="wrapper"><span class="banner">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?