Stretch child div to fit parent div (grid)

Question

Ok, so I have a grid that looks like:

.grid-wrap {
    display: grid;
    grid-gap: 1.5em;
    margin: 1em;
}

.c-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-item {
    width:100%;
    position: relative;
    margin: 0;
    background-color: #fff;
    border-radius:  var(--bt-border-radius) var(--bt-border-radius);
}   

.item-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin: 0;
    background-color: #fafafa;
    border-radius:  var(--bt-border-radius) var(--bt-border-radius) 0 0;
}

.item-content {
    padding: 4%;
    min-height: 0;
    position: relative;
    background: #ccc;
}

<div class="grid-wrap c-3">
    <div class="grid-item">
        <a href="#">
            <div class="item-hero">
                <img src="assets/placeholder.jpg" />
            </div>
            <div class="item-content">A lot of text here that expands the div. A lot of text here that expands the div.
            </div>
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <div class="item-hero">
                <img src="assets/placeholder.jpg" />
            </div>
            <div class="item-content">Just a little text.
            </div>
        </a>
    </div> <!-- etc -->
</div>

So far so good. But I'd like to make the div "item-content" with "Just a little text" to stretch to the same height of whatever's left of "grid-item". Right now, the height of "item-content" just depends on it's content.

I've tried to set "item-content" height: 100%. I've also tried the solutions suggested as option 1 (display:flex) here: https://stackoverflow.com/a/4805371/21319760

with no luck.

score 0 · Accepted Answer · answered Mar 23 '23 at 07:34

Just Make the a tag in every .grid-item a flex. then tell .item-content to fill the remaining space, I Just added about 6 lines to your css:

.grid-wrap {
    display: grid;
    grid-gap: 1.5em;
    margin: 1em;
}

.c-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-item {
    width:100%;
    position: relative;
    margin: 0;
    background-color: #fff;
    border-radius:  var(--bt-border-radius) var(--bt-border-radius);
}   
.grid-item > a {
     display: flex;
     height: 100%;
     flex-direction: column;
}

.item-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin: 0;
    background-color: #fafafa;
    border-radius:  var(--bt-border-radius) var(--bt-border-radius) 0 0;
}

.item-content {
    padding: 4%;
    min-height: 0;
    position: relative;
    background: #ccc;
    flex: 1;
}

<div class="grid-wrap c-3">
    <div class="grid-item">
        <a href="#">
            <div class="item-hero">
                <img src="assets/placeholder.jpg" />
            </div>
            <div class="item-content">A lot of text here that expands the div. A lot of text here that expands the div.
            </div>
        </a>
    </div>
    <div class="grid-item">
        <a href="#">
            <div class="item-hero">
                <img src="assets/placeholder.jpg" />
            </div>
            <div class="item-content">Just a little text.
            </div>
        </a>
    </div> <!-- etc -->
</div>

Stretch child div to fit parent div (grid)

1 Answers1