MaterializeCSS how can i make row column height the same?

Question

I have a basic grid on materializeCSS my problem is my column is not the same height so my layout became a mess. I know this has been ask on bootstrap but none of the solution works for me in materializeCSS

This is my jsfiddle https://jsfiddle.net/zrb46zr2/1/

<div class="row">
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
    Looooong Looooong Looooong Looooong Looooong text
    </p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
      Short text
    </p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>Short text</p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>

  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
</div>

Esmaria

Answer 1

I actually found a simple solution but it requires a plugin and jquery and also i am not sure on the cons of doing this.

But please feel free to share your own solution i really want to fix this with maybe pure CSS

Anyway the code is like this

read and install this script: https://github.com/liabru/jquery-match-height

HTML

<div class="row">
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
    Looooong Looooong Looooong Looooong Looooong text
    </p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
      Short text
    </p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>Short text</p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>

  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
</div>

Javascript

$(document.ready(function(){
   $('.sample').matchHeight();
});

Esmaria

Added a pure CSS solution, let me know if it works for you. – Pulitzer

Answer 2

This can be easily fixed with the proper use of the grid system.

In your code, you have 6 div elements that you give a size of "col m4 s6" each. Adding all of these divs together equals 24 medium columns or 36 small columns. These 24 medium columns/36 small columns are placed within a single row which only works with a max layout of 12 columns.

To alleviate this, wrap each group of elements that equal 12 column widths within their own row:

<div class="row">
    <div class="col m4">
        <p>Content</p>
    </div>
    <div class="col m4">
        <p>More Content</p>
    </div> 
    <div class="col m4">
        <p>Even More Content</p>
    </div>
    <!-- No more room for content as three m4-sized columns equal 12. 
         Any additional content should be placed within a new row-->
</div>
<div class="row>
    <!--Additional content up to 12 column widths go in here-->
</div>
...

I updated your initial fiddle to demonstrate this. You'll see that the column heights have been fixed as well.

Heimer

Good point about the 12 row column widths, for sure. I'm afraid, though, that this is not sufficient to synchronize the height of the col divs within a single row. Take a look at this slightly tweaked fiddle. I've just added a background color so that it is clear that the first col div has a different height from the others in its row. – Light

How do you know how many rows you need to do if you have dynamic content? – Lillis

Based on the documentation, exceeding the 12 column limit appears to be supported. Their own docs explicitly include examples of doing so when engaging in fluid layouts. – Pursley

Answer 3

With SASS, I use clear:left on the first col.

Example for a s4 m3 l2:

@media #{$small-and-down}{
    .col:nth-child(3n+1) {
        clear: left;
    }
}
@media #{$medium-only}{
    .col:nth-child(4n+1) {
        clear: left;
    }
}
@media #{$large-and-up} {
    .col:nth-child(6n+1) {
        clear: left;
    }
}

Onus

Answer 4

Here's a simple trick using pure CSS -

.row-flex {
  display: flex !important;
}
.row-flex .col {
  min-height: 100% !important;
}

Apply this rule to your row element:

<div class="row row-flex">
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
    Looooong Looooong Looooong Looooong Looooong text
    </p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
      Short text
    </p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>Short text</p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>

  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
</div>

Now, all your columns are 100% of the height of the row and your row's height is equal to the height of the longest column within it.

Note: if you are going to use a single column layout on small screens (with the s12 class, for example), you'll need a media query to set .row-flex to display: block when the screen is small.

Hope this helps.

Pulitzer