title: How to include the grid layout in angular material design?
body: <p>I am trying to make a grid layout in Angular Material. I followed their documentation and some of my CSS is working fine, like <code>button</code> and <code>input</code>, but grid is not rendering any CSS. It is just rendering the simple HTML. </p>
  
  <p><strong>Source I followed:</strong></p>
  
  <p><a href="https://material.angularjs.org/latest/layout/options" rel="nofollow">https://material.angularjs.org/latest/layout/options</a> </p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>&lt;!-- STYLES --&gt;
      &lt;!-- build:css lib/css/main.min.css --&gt;
      &lt;!-- &lt;link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.css"&gt; --&gt;
      &lt;link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="components/angular-material/angular-material.css"&gt; 
      &lt;link rel="stylesheet" type="text/css" href="components/angular-material/modules/css/angular-material-layouts.css"&gt; 
      &lt;!-- endbuild --&gt;    
  </code></pre>
  
  <p><strong>module.js</strong></p>
  
  <pre><code>var app = angular.module('PdbTool', ["ng","ngAnimate","ngAria",'ngMdIcons','ngMaterial', 'ui.router', 'ngCookies', 'ngResource','ngRoute', 'satellizer', 'myConfig.config'])
    .config(function($mdThemingProvider) {
    $mdThemingProvider.theme('default')
      .primaryPalette('pink')
      .accentPalette('orange');
  });
  </code></pre>
  
  <p><strong>scripts</strong></p>
  
  <pre><code>&lt;!-- SCRIPTS --&gt;
      &lt;!-- build:js lib/js/main.min.js --&gt;
      &lt;script type="text/javascript" src="components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="components/angular-animate/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="components/angular-aria/angular-aria.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="components/angular-material/angular-material.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="components/satellizer/satellizer.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="components/angular-route/angular-route.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="components/angular-resource/angular-resource.js"&gt;&lt;/script&gt;
      &lt;!-- // &lt;script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.js"&gt;&lt;/script&gt; --&gt;
      &lt;script type="text/javascript" src="components/angular-cookies/angular-cookies.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.js"&gt;&lt;/script&gt;
      &lt;!-- // &lt;script type="text/javascript" src="components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt; --&gt;
      &lt;!-- endbuild --&gt;
      &lt;!-- Custom Scripts --&gt;
      &lt;script type="text/javascript" src="js/dashboard.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/configFileLocal.js"&gt;&lt;/script&gt;
      &lt;!-- script type="text/javascript" src="js/configFileProd.js"&gt;&lt;/script--&gt;
      &lt;script src="//cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p><strong>html code:</strong></p>
  
  <pre><code>&lt;div ng-controller="AppCtrl"&gt;
    &lt;div layout="row" layout-sm="column"&gt; 
      &lt;div flex&gt;
        I'm above on mobile, and to the left on larger devices.
      &lt;/div&gt;
      &lt;div flex&gt;
        I'm below on mobile, and to the right on larger devices.
      &lt;/div&gt;
    &lt;/div&gt;
      &lt;md-input-container&gt;
        &lt;label&gt;Search&lt;/label&gt;
          &lt;input ng-model="search"&gt;
      &lt;/md-input-container&gt;
  &lt;/div&gt;
  </code></pre>