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

Question

*{
  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

Thanks for the pointer. I have added the Stack Snippet – Jinto Oct 06 '16 at 17:55 — Jinto, Oct 06 '16 at 17:55

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

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:

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.

edited May 23 '17 at 11:48

Community

1
1

answered Oct 06 '16 at 05:13

Antonio Hernández

466
2
10

This works. However, the div heights are not same. But, row alignment is good now. But, lets say each item has a border also. Then, this wont look good. http://jsbin.com/hepepafeba/1/edit?html,css,output – Jinto Oct 07 '16 at 00:19

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

1 Answers1