title: align components in grid: MDL
body: <p>I need help in arranging components inside the mdl card with grid. I am new to web design can some one help and explain how to arrange. Here I have created three cards and need to put toggle switch inside three cards.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html class=" ui-layout-condensed ui-capitalize-values ui-icons-enabled "&gt;
  
  &lt;head&gt;
    &lt;title&gt;thome | DashBoard&lt;/title&gt;
    &lt;!-- Material Design icon font --&gt;
    &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
    &lt;!-- Material Design Lite --&gt;
    &lt;link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"&gt;
    &lt;link rel="stylesheet" href="/css/card.css"&gt;
    &lt;link rel="stylesheet" href="/css/grid.css"&gt;
    &lt;!-- Material Design icon font --&gt;
    &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
    &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt; &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!-- Always shows a header, even in smaller screens. --&gt;
    &lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header "&gt;
      &lt;header class="mdl-layout__header mdl-color--grey-800"&gt;
        &lt;div class="mdl-layout__header-row"&gt;
          &lt;!-- Title --&gt;
          &lt;span class="mdl-layout-title"&gt;Dashboard&lt;/span&gt;
          &lt;!-- Add spacer, to align navigation to the right --&gt;
          &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
          &lt;!-- Navigation. We hide it in small screens. --&gt;
        &lt;/div&gt;
      &lt;/header&gt;
      &lt;div class="mdl-layout__drawer"&gt;
        &lt;span class="mdl-layout-title"&gt;Dashboard&lt;/span&gt;
        &lt;nav class="mdl-navigation"&gt;
          &lt;a class="mdl-navigation__link" href=""&gt;Device&lt;/a&gt;
          &lt;a class="mdl-navigation__link" href=""&gt;Rooms&lt;/a&gt;
          &lt;a class="mdl-navigation__link" href=""&gt;Zones&lt;/a&gt;
          &lt;a class="mdl-navigation__link" href=""&gt;Settings&lt;/a&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="content-grid mdl-grid"&gt;
        &lt;div class="demo-card-square mdl-card mdl-shadow--8dp" style="margin:10px;"&gt;
          &lt;div class="mdl-card__title mdl-card--expand"&gt;
            &lt;h2 class="mdl-card__title-text"&gt;Light&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="mdl-card__supporting-text mdl-grid"&gt;
            &lt;form action="#"&gt;
              This is card for devcie 1
          &lt;/div&gt;
          &lt;div class="mdl-card__actions mdl-card--border"&gt;
            &lt;a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"&gt;
                        View Updates
                        &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  
        &lt;div class="demo-card-square mdl-card mdl-shadow--8dp" style="margin:10px;"&gt;
          &lt;div class="mdl-card__title mdl-card--expand"&gt;
            &lt;h2 class="mdl-card__title-text"&gt;Fan&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="mdl-card__supporting-text"&gt;
            This is card for devcie 2
          &lt;/div&gt;
          &lt;div class="mdl-card__actions mdl-card--border"&gt;
            &lt;a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"&gt;
                        View Updates
                        &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="demo-card-square mdl-grid mdl-card mdl-shadow--8dp" style="margin:10px;"&gt;
          &lt;div class="mdl-card__title mdl-card--expand"&gt;
            &lt;h2 class="mdl-card__title-text"&gt;Switch Board&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="mdl-card__supporting-text mdl-cell--6-col" style&gt;
            Smart Switch 1
          &lt;/div&gt;
          &lt;label class="mdl-switch mdl-js-switch mdl-js-ripple-effect mdl-cell--6-col" for="switch-1"&gt;
                       &lt;input type="checkbox" id="switch-1" class="mdl-switch__input" checked&gt;
                       &lt;span class="mdl-switch__label"&gt;&lt;/span&gt;
                     &lt;/label&gt;
          &lt;div class="mdl-card__actions mdl-card--border"&gt;
            &lt;a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"&gt;
                        View Updates
                        &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  &lt;/html&gt;
  &lt;script defer src="https://code.getmdl.io/1.3.0/material.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>