CODEWITHSUNDEEP
htmlcssmaterialize
Rgfvfk Iff
Rgfvfk Iff

Reputation: 1609

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

Upvotes: 0

Views: 148

Answers (1)

Nutshell
Nutshell

Reputation: 8537

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

Upvotes: 1

Related Questions