MaterializeCSS how can i make row column height the same? - responsive-design

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>

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();
});

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.

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;
}
}

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.