CODEWITHSUNDEEP
htmlcssmaterial-design-lite
Gandalf the White
Gandalf the White

Reputation: 2465

Vertical Division in a Material Design Lite Card

I am using Material Design Lite Website Link Here

There is no way whatsoever to make a vertical division in card as per documentation given there.

For Divisions generally grid layout is used in material design but when I am making use of grid then there is by default a space between the two cells. Is there any other way by which I can have vertical divisions without space in a card?

Demo Plunkr

Css

    .grid-handler {
  max-width: 600px;
}

HTML

 <div class="grid-handler mdl-grid">
         <div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp">6</div>
         <div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp">6</div>
  </div>

Upvotes: 4

Views: 1891

Answers (1)

Rahul Sagore
Rahul Sagore

Reputation: 1668

You can use mdl-grid--no-spacing class with mdl-grid :

<div class="mdl-grid mdl-grid--no-spacing">
     <div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp">6</div>
     <div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp">6</div>
</div>

Upvotes: 6

Related Questions