jintoppy jintoppy - 2 months ago 7
CSS Question

how to make sure that that grid layout row adjusts the height automatically as per content



*{
box-sizing: border-box;
}

.results__item{
float: left;
width: calc(100%/3 - 40px/3)
}

.results__item:nth-child(3n-1){
margin-left: 20px;
margin-right: 20px;
}

.results__item__img-wrapper{
overflow: hidden;
}

.results__item__img-wrapper img{
width: 100%;
height: calc(100%/3 - 40px/3 + 90px)
}

.results__item__content{
word-wrap: break-word;
}

<div class="results">
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product1 Product1 Product1 Product1 Product1 Product1 Product1 Product1</div>
<div class="price">$122.00</div>
</div>
</div>

<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>

<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>


</div>





I have created a grid layout. When the content of one item is more, the height of the row is not adjusting accordingly. How can I accomplish that?

Note: I dont want to use javascript for this. I am sure, this is possible with CSS

http://jsbin.com/kopatojiho/1/edit?html,css,output

Answer

Wrap every three images with a container. This way, you will have them all stack correctly beside each other as you can see on this image:

enter image description here

Also make sure to clear the collapsing on each of the containers you'll add as well, as they are collapsed because of the floated images. I normally use overflow: auto for this, but check this SO post for more ways to do it.