Materialize Grid Columns overflowing - html

Question

I'm trying to make a "products" page, I have a card in each column, and only one row.
<section>
<div class="container">
<div class="row">
<div class="col s12">
<h4 class="grey-text text-darken-4">
New Listings
</h4>
</div>
</div>
<div class="row">
<div class="col s6 m4 l3">
<div class="card hoverable">
<a href="">
<div class="card-image">
<img src="https://source.unsplash.com/250x250/?mobile" alt="" />
</div>
<div class="card-content">
<h6 class="truncate black-text"><b>Lorem</b></h6>
<p class="truncate grey-text text-darken-2">Buy Lorem</p>
<p class="right-align grey-text"><small>Today</small></p>
</div>
</a>
</div>
</div>
<div class="col s6 m4 l3">
<div class="card hoverable">
<a href="">
<div class="card-image">
<img src="https://source.unsplash.com/250x250/?mobile" alt="" />
</div>
<div class="card-content">
<h6 class="truncate black-text"><b>Lorem</b></h6>
<p class="truncate grey-text text-darken-2">Buy Lorem</p>
<p class="right-align grey-text"><small>Today</small></p>
</div>
</a>
</div>
</div>
<div class="col s6 m4 l3">
<div class="card hoverable">
<a href="">
<div class="card-image">
<img src="https://source.unsplash.com/250x250/?mobile" alt="" />
</div>
<div class="card-content">
<h6 class="truncate black-text"><b>Lorem</b></h6>
<p class="truncate grey-text text-darken-2">Buy Lorem</p>
<p class="right-align grey-text"><small>Today</small></p>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
My code looks something like this, a card jumps from one line to the next even though there is space for it, I don't really know what is wrong
Edit: It is working now, gave a class "small" to card div. Thanks to Sean.

Answer 1

Materialize rows don't handle cards with different heights very well, for this scenario, it helps to fix the height of your cards to make them uniform using the three provided classes:|
<div class="card small">
<!-- Card Content -->
</div>
Three sizes applied as an extra class on the card - small, medium and large which equate to:
.card.small {
height: 300px;
}
.card.medium {
height: 400px;
}
.card.large {
height: 500px;
}
https://materializecss.com/cards.html#sizes