I am working on a layout that involves a container with "cards": images positioned above with related text below. Here's an example:
<div class = "cards">
<div class = "card">
<div class = "image-wrap">
<img src= "image1.jpg" />
</div>
<div class = "text">
Lorem ipsum
</div>
</div>
<div class = "card">
<div class = "image-wrap">
<img src= "image2.jpg" />
</div>
<div class = "text">
Lorem ipsum dolor sit
</div>
</div>
<!-- snip -->
</div>
My challenge is to align the bottom edges of these images within each row as they have variable height. The number of "cards" in a row will change based on responsiveness, so tables are not suitable here.
A jsfiddle (link provided) comes close to achieving this but I aim for the bottoms of the varying-height images to align perfectly within each row. Each card should adjust its height to match the tallest one in that row, ensuring alignment at the bottom.
The outcome desired is illustrated in this image: ideal layout
Separating the images and text into different containers won't work due to the responsive nature and variability in the number of cards per row based on breakpoints. A purely CSS solution is preferred to prevent layout shifts after JavaScript loads, although achieving this solely with CSS might be challenging.
.cards {
grid-template-columns: calc(1/3*100% - 1/3*10px) calc(1/3*100% - 1/3*10px) calc(1/3*100% - 1/3*10px);
grid-gap: 5px;
margin: 0 auto;
display: grid;
width: 100%;
background-color: #f1f1f1;
}
.card {
border: 1px solid #ccc;
padding: 5px;
}
.image-wrap,
.text {
width: 100%;
}
.image-wrap {
text-align: center;
}<div class = "cards">
<div class = "card">
<div class = "image-wrap">
<img src ="https://via.placeholder.com/90x40/fff.jpg">
</div>
<div class = "text">
Lorem ipsum dolor sit amet
</div>
</div>
<div class = "card">
<div class = "image-wrap">
<img src ="https://via.placeholder.com/90x80/fff.jpg">
</div>
<div class = "text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class = "card">
<div class = "image-wrap">
<img src ="https://via.placeholder.com/90x50/fff.jpg">
</div>
<div class = "text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class = "card">
<div class = "image-wrap">
<img src ="https://via.placeholder.com/90x50/fff.jpg">
</div>
<div class = "text">
Lorem ipsum dolor sit amet.
</div>
</div>
</div>