Materialize grid with unequal heights

Question

I have a grid system built using Materialize with cols of unequal heights (dynamic content).

Each row should have 3 cols. I want each row to start on a new line. However, this is the result I am getting - https://codepen.io/anon/pen/QaVKyG. As you can see, the 4th card seem to start at a weird place, leaving lots of white space on the left.

I've tried using flexbox as seen here - https://codepen.io/anon/pen/rpqLgy

.row { display:flex; flex-wrap: wrap; }

However, the problem with this method is that the cols on the last row does not seem to be aligning to the left.

In short, I want the grid to work the same way as it does if I use bootstrap (like this https://codepen.io/anon/pen/vpVvKv). As you can see, for bootstrap, cols on the next row starts on the next line, even if the cols have unequal heights. I can't seem to achieve that with Materialize.

Would appreciate any help with either solution (with flexbox or no flexbox). Thanks!

Answer 1

I am not sure if this is what you want to achieve ..

What I did is I create a cardHolder and then inside it are the cards

<div class="cardHolder">
  <div class="card"></div>
  <div class="card2"></div>
  <div class="card3"></div>
</div>

Then I did a flex box style for the parent of the cards..

.cardHolder{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex-flow: row wrap;
  width:100%;
}

after that I set the width of the cards since you wanted each row to have 3 column. I did a calc function to initialize the width of the cards

.cardHolder div{
  width:calc(100% / 3);
  padding:0;
  margin:0;
}

and then create a media query to initialize the full width of the cards when the size of the screen is less than 600 pixels..

@media only screen and (max-width: 600px){
  .cardHolder div{
   width:100%; 
  }
}

Please see link for the sample code.. https://codepen.io/deibu21/pen/jYedep/?editors=1100

Hope this helps.

Answer 2

You can also use equal max-height and min-height.Ex-

.card{
     border:1px solid black; 
     min-height:450px; 
     max-height:450px
     }

This will make your card of equal size and align.