角度材质2网格布局不起作用

Question

我正在尝试使用Angular Material 2中基于网格的布局来布局我的表单页面，但它无法正常工作。应该使用什么标签？

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <main class="mdl-layout__content">    
      <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--4-col-phone mdl-cell--4-col-tablet mdl-cell--6-col-desktop">
          <md-input-container>
            <input mdInput placeholder="Project" value="Personal">
          </md-input-container>
        </div>
        <div class="mdl-cell mdl-cell--4-col-phone mdl-cell--4-col-tablet mdl-cell--6-col-desktop">
          <md-input-container>
            <input mdInput placeholder="To Do" value="Buy Bread">
          </md-input-container>
        </div>
      </div>
      <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--4-col-phone mdl-cell--4-col-tablet mdl-cell--6-col-desktop">
          <md-input-container>
            <input mdInput placeholder="Due Date" type="Date">
          </md-input-container>
        </div>
        <div class="mdl-cell mdl-cell--4-col-phone  mdl-cell--4-col-tablet">
          <md-input-container>
            <input mdInput placeholder="Priority" type="number" value="1">
          </md-input-container>
        </div>
      </div>
      <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--4-col-phone mdl-cell--4-col-tablet mdl-cell--6-col-desktop">
          <md-input-container>
            <input mdInput placeholder="Tags" value="grocery">
          </md-input-container>
        </div>
        <div class="mdl-cell mdl-cell--4-col-phone mdl-cell--4-col-tablet mdl-cell--6-col-desktop">
          <md-input-container>
            <input mdInput placeholder="Description" value="We are all out of bread!  This is an emergency!">
          </md-input-container>
        </div>
      </div>      
  </main>
</div>