I have some cards in a container. The mark-up for the cards is convoluted due to reasons I won’t go into, so assume that the HTML can’t be changed. The text content in the cards may vary in length and my objective is to align the avatar image at the bottom of the cards so that the avatars always line-up regardless of the length of content in the cards. I’m trying to achieve this using a flex layout and setting margin-top: auto on the .card__avatar element. However, the issue is that because these cards contain various nested wrapper divs I’m struggling to get the contents to occupy the full vertical space of the card.
<code>* {
margin: 0;
padding: 0;
}
body {
background: #eee;
}
ul {
list-style-type: none;
}
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 30px;
max-width: 1000px;
margin: 0 auto;
}
.grid__item {
grid-column: span 2;
}
.grid__item--full {
grid-column: span 6;
}
.grid__item--half {
grid-column: span 3;
}
.card {
background: #fff;
height: 100%;
}
.card__content {
height: 100%;
display: flex;
flex-direction: column;
}
.card__detail {
display: flex;
flex-direction: column;
}
.card__img {
display: block;
width: 100%;
}
.card__avatar {
margin-top: auto;
}
.avatar__img {
width: 50px;
height: 50px;
background: #666;
border-radius: 50%;
}</code>
<code>* {
margin: 0;
padding: 0;
}
body {
background: #eee;
}
ul {
list-style-type: none;
}
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 30px;
max-width: 1000px;
margin: 0 auto;
}
.grid__item {
grid-column: span 2;
}
.grid__item--full {
grid-column: span 6;
}
.grid__item--half {
grid-column: span 3;
}
.card {
background: #fff;
height: 100%;
}
.card__content {
height: 100%;
display: flex;
flex-direction: column;
}
.card__detail {
display: flex;
flex-direction: column;
}
.card__img {
display: block;
width: 100%;
}
.card__avatar {
margin-top: auto;
}
.avatar__img {
width: 50px;
height: 50px;
background: #666;
border-radius: 50%;
}</code>
* {
margin: 0;
padding: 0;
}
body {
background: #eee;
}
ul {
list-style-type: none;
}
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 30px;
max-width: 1000px;
margin: 0 auto;
}
.grid__item {
grid-column: span 2;
}
.grid__item--full {
grid-column: span 6;
}
.grid__item--half {
grid-column: span 3;
}
.card {
background: #fff;
height: 100%;
}
.card__content {
height: 100%;
display: flex;
flex-direction: column;
}
.card__detail {
display: flex;
flex-direction: column;
}
.card__img {
display: block;
width: 100%;
}
.card__avatar {
margin-top: auto;
}
.avatar__img {
width: 50px;
height: 50px;
background: #666;
border-radius: 50%;
}<code><ul class="grid">
<li class="grid__item grid__item--full">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 1</h2>
<p class="card__text">Lorem ipsum dolor</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item grid__item--half">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 2</h2>
<p class="card__text">Lorem ipsum dolor lots of text here which causes a line wrap lots of text here which causes a line wrap</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item grid__item--half">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 3</h2>
<p class="card__text">Lorem ipsum dolor</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 4</h2>
<p class="card__text">Lorem ipsum dolor</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 5</h2>
<p class="card__text">Lorem ipsum dolor lots of text here which causes a line wrap lots of text here which causes a line wrap</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 6</h2>
<p class="card__text">Lorem ipsum dolor</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
</ul></code>
<code><ul class="grid">
<li class="grid__item grid__item--full">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 1</h2>
<p class="card__text">Lorem ipsum dolor</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item grid__item--half">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 2</h2>
<p class="card__text">Lorem ipsum dolor lots of text here which causes a line wrap lots of text here which causes a line wrap</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item grid__item--half">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 3</h2>
<p class="card__text">Lorem ipsum dolor</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 4</h2>
<p class="card__text">Lorem ipsum dolor</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 5</h2>
<p class="card__text">Lorem ipsum dolor lots of text here which causes a line wrap lots of text here which causes a line wrap</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 6</h2>
<p class="card__text">Lorem ipsum dolor</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
</ul></code>
<ul class="grid">
<li class="grid__item grid__item--full">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 1</h2>
<p class="card__text">Lorem ipsum dolor</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item grid__item--half">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 2</h2>
<p class="card__text">Lorem ipsum dolor lots of text here which causes a line wrap lots of text here which causes a line wrap</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item grid__item--half">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 3</h2>
<p class="card__text">Lorem ipsum dolor</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 4</h2>
<p class="card__text">Lorem ipsum dolor</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 5</h2>
<p class="card__text">Lorem ipsum dolor lots of text here which causes a line wrap lots of text here which causes a line wrap</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
<li class="grid__item">
<article class="card">
<div class="card__content">
<img src="https://placehold.co/1600x900" class="card__img">
<div class="card__detail">
<h2 class="card__heading">Card 6</h2>
<p class="card__text">Lorem ipsum dolor</p>
<div class="card__avatar avatar">
<div class="avatar__img"></div>
</div>
</div>
</div>
</article>
</li>
</ul>I want to be able to get the .card__content elements to be the full height of their parent and the .card__details elements to occupy the full height of the card minus the image height. That way the top margin on the .card__avatar elements should work. However, applying .display: flex to the .card__content makes it ignore the height: 100%.
I’d love to use grid for the cards but (long story!) we’re using Tailwind on this project and the lead dev will not allow ‘arbitrary values’ so we can’t do something akin to:
<code>.card__content {
display: grid;
grid-template-rows: min-content 1fr;
height: 100%;
}
</code>
<code>.card__content {
display: grid;
grid-template-rows: min-content 1fr;
height: 100%;
}
</code>
.card__content {
display: grid;
grid-template-rows: min-content 1fr;
height: 100%;
}
…which would work perfectly. Hence having to find a flexbox solution to the problem.