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


Tags: css,layout

Problem :

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



Solution :

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.


    CSS Howto..

    How to create this CSS border

    how to fix closure compiler error on css({ float: 'left' }) [duplicate]

    In GWT, how to reference an external (obfuscated) CSS in another CSS file

    How to override css cursor property of a hovered button?

    Rails - how to place text onto an image within a code loop

    Flex - understanding how to properly reference an image in a library project css file

    How to properly use CSS borders to visualize a value chain?

    How can I display 2 big buttons next to each other html & css

    How to position text in a div?

    How To Slide One Image Out From Behind Another On Hover?

    how to do external scripting?

    How to put a border on a triangle shape using css?

    How can i make infinite flowing background with only CSS?

    MVC How make a logout button

    how to set break for print page(div) using css?

    How to Achieve Word Wrap Effect With Children Divs

    How to put some divs in a row?

    how to make css div margin-top 20px from div above

    How to make parent div above child div without position absolute?

    how to css for data attribute [duplicate]

    How to make Zig Zag borders using CSS? [closed]

    How to use pure css selector to select hidden element

    How can I create an addin in Visual Studio to generate javascript, CSS and other code from a settings file

    php- How to strip CSS in the text

    Generated web font doesn't show dots above Ü

    How to link my HTML file to my CSS file [closed]

    wordpress submenu css show on parent active and child active

    How do I filter unwanted CS styles from CS sheet?

    Bootstrap: navbar showing a line

    How to evenly distribute menu items with CSS when width and quantity is not known?