Vertical Division in a Material Design Lite Card

Question

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>

I was doing that on the complete grid and hence it wasn't working, my bad. — Gandalf the White, Mar 25 '16 at 14:26

score 6 · Accepted Answer · answered Mar 30 '16 at 16:41

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>

Vertical Division in a Material Design Lite Card

1 Answers1