Search code examples
htmlcssmaterialize

MaterializeCSS make rows aligned

I am using materializecss and I have products in a grid system. Each product is wrapped in a div <div class="col s12 m6 l4" > but when the products have varying heights, the products become staggered. I want to make it so that each row is separated and the products align to the left side.

enter image description here

Solution

  • You have to wrap it into .row class

    Example : 

    <div class="row">
   <div class="col s4">Your  Your contentYour contentYour contentYour contentYour contentYour contentYour contentYour contentYour contentYour contentYour contentYour contentYour contentYour content</div>
   <div class="col s4">Your content</div>
   <div class="col s4">Your content</div>
</div>
<div class="row">
   <div class="col s4">Your content</div>
   <div class="col s4">Your content</div>
   <div class="col s4">Your content</div>
</div>
<div class="row">
   <div class="col s4">Your content</div>
   <div class="col s4">Your content</div>
   <div class="col s4">Your content</div>
</div>

    See this fiddle