MaterializeCSS how can i make row column height the same?

问题

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>

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

回答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.

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

回答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.

来源：https://stackoverflow.com/questions/37760307/materializecss-how-can-i-make-row-column-height-the-same