Add vertical space between full width card in material-design-lite

Question

How to add space between MDL card component?

<div class="demo-card-event mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--expand">
    <h4>
      Featured event:<br>
      May 24, 2016<br>
      7-11pm
    </h4>
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Add to Calendar
    </a>
    <div class="mdl-layout-spacer"></div>
    <i class="material-icons">event</i>
  </div>
</div>

<div class="demo-card-event mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--expand">
    <h4>
      Featured event:<br>
      May 24, 2016<br>
      7-11pm
    </h4>
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Add to Calendar
    </a>
    <div class="mdl-layout-spacer"></div>
    <i class="material-icons">event</i>
  </div>
</div>

This is the card component there is no space between the cards they are completely joined end to end.

Is there any inbuilt class to add space or we need to add that manually or is there any mistake in my code.

Tried adding mdl-layout-spacer class still did not work.

Found a old thread that was not answered by any person.

Vertical adjustment between cards in Material Design Lite

Edit:

is this the correct way to add grid?

<div class="mdl-grid" style="max-width: 90%;">
    <div class="mdl-cell mdl-cell--9-col mdl-card mdl-shadow--4dp">

    </div>

    <div class="mdl-cell mdl-cell--3-col mdl-typography--text-center">

        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                    <h4>
                        Featured event:<br>
                        May 24, 2016<br>
                        7-11pm
                    </h4>
                </div>
                <div class="mdl-card__actions mdl-card--border">
                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar
                    </a>
                    <div class="mdl-layout-spacer"></div>
                    <i class="material-icons">event</i>
                </div>
            </div>
        </div>

    </div>
</div>

Answer 1

You could add your a row wrapper around the cards and add a cell class to the card, or wrap each card in a cell class, depending on the effect you want.

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
  <div class="mdl-grid" style="max-width: 90%;">
<div class="mdl-cell mdl-cell--9-col mdl-cell--8-col-tablet mdl-card mdl-shadow--4dp">
</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--8-col-tablet mdl-typography--text-center">
  <div class="mdl-grid">
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet demo-card-event mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title mdl-card--expand">
          <h4>
            Featured event:<br>
            May 24, 2016<br>
            7-11pm
          </h4>
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
            Add to Calendar
          </a>
          <div class="mdl-layout-spacer"></div>
          <i class="material-icons">event</i>
        </div>
      </div>

      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet demo-card-event mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title mdl-card--expand">
          <h4>
            Featured event:<br>
            May 24, 2016<br>
            7-11pm
          </h4>
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
            Add to Calendar
          </a>
          <div class="mdl-layout-spacer"></div>
          <i class="material-icons">event</i>
        </div>
      </div>
    </div>
  </div>
</div>

Update with nested grids.