MaterializeCSS how can i make row column height the same?
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();
});
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.
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;
}
}