CSS have each grid element a different height

Question

I have a grid with three columns and the height changes to fit all the text.

.main .contentWrapper {
    height:60%;
    margin-top:5%;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:10px;
    /*grid-template-rows: auto;*/
    height:auto;
}

.main .contentWrapper .box .boxText {
    padding:15px;
    height:25%;
    text-align:center;
    margin:0;
}

img {
    object-fit:cover;
    width:100%;
    height:400px;
    margin:0;
}

How can I make it so each box resizes to fit its own text, and they're not all the same height? As it is the first two columns resize to fit the largest piece of text which is in the third column.

Answer 1

The default value of property align-items for a grid container is stretch which means each grid item will extend to the height of the grid row (to the largest item in the row if height is not set using grid-template-rows ).

To change this you can just add align-items: flex-start to the grid container ( .contentWrapper ) - see demo below:

 body { background: #ddd; } .contentWrapper { height: 60%; margin-top: 5%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; /*grid-template-rows: auto;*/ height: auto; align-items: flex-start; /* ADDED */ } .contentWrapper .box .boxText { padding: 15px; height: 25%; text-align: center; margin: 0; } .box { background: #fff; } img { object-fit: cover; width: 100%; height: 400px; margin: 0; } 

 <div class="contentWrapper"> <div class="box"> <img src="https://via.placeholder.com/400" /> <div class="boxText">Some text here</div> </div> <div class="box"> <img src="https://via.placeholder.com/400" /> <div class="boxText">Some text here Some text here Some text here </div> </div> <div class="box"> <img src="https://via.placeholder.com/400" /> <div class="boxText">Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here </div> </div> </div> 

Answer 2

The way I solved this was to add margin-bottom: auto to each .contentWrapper .box . This pushed the text flush to the image and fit each cell to its content.

 .main .contentWrapper { height: 60%; margin-top: 5%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; /*grid-template-rows: auto;*/ height: auto; } .main .contentWrapper .box { background-color: #eee; margin-bottom: auto; } .main .contentWrapper .box .boxText { padding: 15px; height: 25%; text-align: center; margin: 0; } img { object-fit: cover; width: 100%; height: 400px; margin: 0; } 

 <div class="main"> <div class="contentWrapper"> <div class="box"> <img src="http://placekitten.com/200/200" alt=""> <div class="boxText">text text text text</div> </div> <div class="box"> <img src="http://placekitten.com/200/200" alt=""> <div class="boxText">text text text texttext text text texttext text text texttext text text text</div> </div> <div class="box"> <img src="http://placekitten.com/200/200" alt=""> <div class="boxText">text text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text text</div> </div> </div> </div> 

jsFiddle