Javascript 如何在角材料设计中包含网格布局？

我正在尝试用角材料制作网格布局。我遵循了他们的文档，我的一些CSS工作正常，比如

按钮

和

输入

，但grid没有呈现任何CSS。它只是呈现简单的HTML

我跟踪的来源：

<!-- STYLES -->
    <!-- build:css lib/css/main.min.css -->
    <!-- <link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.css"> -->
    <link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="components/angular-material/angular-material.css"> 
    <link rel="stylesheet" type="text/css" href="components/angular-material/modules/css/angular-material-layouts.css"> 
    <!-- endbuild -->    

<div ng-controller="AppCtrl">
  <div layout="row" layout-sm="column"> 
    <div flex>
      I'm above on mobile, and to the left on larger devices.
    </div>
    <div flex>
      I'm below on mobile, and to the right on larger devices.
    </div>
  </div>
    <md-input-container>
      <label>Search</label>
        <input ng-model="search">
    </md-input-container>
</div>

CSS:

<!-- STYLES -->
    <!-- build:css lib/css/main.min.css -->
    <!-- <link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.css"> -->
    <link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="components/angular-material/angular-material.css"> 
    <link rel="stylesheet" type="text/css" href="components/angular-material/modules/css/angular-material-layouts.css"> 
    <!-- endbuild -->    

<div ng-controller="AppCtrl">
  <div layout="row" layout-sm="column"> 
    <div flex>
      I'm above on mobile, and to the left on larger devices.
    </div>
    <div flex>
      I'm below on mobile, and to the right on larger devices.
    </div>
  </div>
    <md-input-container>
      <label>Search</label>
        <input ng-model="search">
    </md-input-container>
</div>

脚本

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');
});

<!-- SCRIPTS -->
    <!-- build:js lib/js/main.min.js -->
    <script type="text/javascript" src="components/angular/angular.js"></script>
    <script type="text/javascript" src="components/angular-animate/angular-animate.js"></script>
    <script type="text/javascript" src="components/angular-aria/angular-aria.js"></script>
    <script type="text/javascript" src="components/angular-material/angular-material.js"></script>
    <script type="text/javascript" src="components/satellizer/satellizer.js"></script>
    <script type="text/javascript" src="components/angular-route/angular-route.js"></script>
    <script type="text/javascript" src="components/angular-resource/angular-resource.js"></script>
    <!-- // <script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.js"></script> -->
    <script type="text/javascript" src="components/angular-cookies/angular-cookies.js"></script>
    <script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.js"></script>
    <!-- // <script type="text/javascript" src="components/jquery/dist/jquery.min.js"></script> -->
    <!-- endbuild -->
    <!-- Custom Scripts -->
    <script type="text/javascript" src="js/dashboard.min.js"></script>
    <script type="text/javascript" src="js/configFileLocal.js"></script>
    <!-- script type="text/javascript" src="js/configFileProd.js"></script-->
    <script src="//cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script> 

html代码：

<!-- STYLES -->
    <!-- build:css lib/css/main.min.css -->
    <!-- <link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.css"> -->
    <link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="components/angular-material/angular-material.css"> 
    <link rel="stylesheet" type="text/css" href="components/angular-material/modules/css/angular-material-layouts.css"> 
    <!-- endbuild -->    

<div ng-controller="AppCtrl">
  <div layout="row" layout-sm="column"> 
    <div flex>
      I'm above on mobile, and to the left on larger devices.
    </div>
    <div flex>
      I'm below on mobile, and to the right on larger devices.
    </div>
  </div>
    <md-input-container>
      <label>Search</label>
        <input ng-model="search">
    </md-input-container>
</div>

我在上面的移动设备上，在左边的大型设备上。
我在下面的移动设备上，在右边的大型设备上。
搜寻

我不使用材质设计，所以我为css网格布局编写了自己的指令。像这样,

@Directive({
  selector: "[v-grid]"
})
export class GridDirective {
  @HostBinding("style.grid-template-columns")
  @Input() columns: string;
  @HostBinding("style.grid-template-rows")
  @Input() rows: string;
  @HostBinding("style.grid-template-areas")
  @Input() areas: string;

  constructor(private readonly el: ElementRef, private readonly renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, "display", "grid");
  }
}

@Directive({
  selector: "[v-grid-area]"
})
export class GridAreaDirective {
  @HostBinding("style.grid-area")
  @Input("v-grid-area") area: string;
}

<div v-grid columns="1fr 100px" rows="1fr 1fr" areas="'area1 area2' 'area1 area2'">
   <div v-grid-area="area1" style="background-color: red">
      <div style="height: 1000px"></div>
   </div>
   <div v-grid-area="area2" style="background-color: yellow"></div>
</div>

我曾经是这样的

@Directive({
  selector: "[v-grid]"
})
export class GridDirective {
  @HostBinding("style.grid-template-columns")
  @Input() columns: string;
  @HostBinding("style.grid-template-rows")
  @Input() rows: string;
  @HostBinding("style.grid-template-areas")
  @Input() areas: string;

  constructor(private readonly el: ElementRef, private readonly renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, "display", "grid");
  }
}

@Directive({
  selector: "[v-grid-area]"
})
export class GridAreaDirective {
  @HostBinding("style.grid-area")
  @Input("v-grid-area") area: string;
}

<div v-grid columns="1fr 100px" rows="1fr 1fr" areas="'area1 area2' 'area1 area2'">
   <div v-grid-area="area1" style="background-color: red">
      <div style="height: 1000px"></div>
   </div>
   <div v-grid-area="area2" style="background-color: yellow"></div>
</div>

---

也许这个答案会对你有所帮助。

我看不出这里有什么错，我做了一个简单的代码笔，它似乎工作得很好。这两个flex div并排，直到你缩小窗口，然后它们堆叠起来：它是如何获得填充和高度的所有这些东西，我们是否必须自定义所有东西，我在bootstrap中工作过，通过类包含行和列，事情变得很容易，现在要了解如何在MDIf中包含，我需要在页面中央包含这个搜索框，并在顶部的深蓝色主题中固定一个标题栏：比如谷歌搜索页面。搜索我应该如何接近