Angular Material Design GRID

AngularJs material design grid component example

Framework 1 :

Framework 2 :

+ Js file(s) :	//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js //ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js //ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js //cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.0/angular-material.min.js

+ Css file(s) :	//cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.0/angular-material.min.css
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="c6d" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

&lt;div ng-app="myApp" ng-controller="myController"&gt;
  &lt;md-grid-list
    md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
    md-row-height-gt-md="1:1" md-row-height="2:2"
    md-gutter="12px" md-gutter-gt-sm="5px" &gt;
    &lt;md-grid-tile  style="background-color:grey;"
      md-rowspan="3" md-colspan="2" md-colspan-sm="1"&gt;
      &lt;md-grid-tile-footer&gt;
        &lt;h3&gt;#1: (3r x 2c)&lt;/h3&gt;
      &lt;/md-grid-tile-footer&gt;
    &lt;/md-grid-tile&gt;
    &lt;md-grid-tile style="background-color:green;"&gt;
      &lt;div&gt;
        My 1r x1c Box
        &lt;br /&gt;&lt;br /&gt;
        Cool ...
      &lt;/div&gt;
      &lt;md-grid-tile-header&gt;
        &lt;h3&gt;This is my header&lt;/h3&gt;
      &lt;/md-grid-tile-header&gt;
      &lt;md-grid-tile-footer&gt;
        &lt;h3&gt;This is my footer&lt;/h3&gt;
      &lt;/md-grid-tile-footer&gt;
    &lt;/md-grid-tile&gt;
    &lt;md-grid-tile  style="background-color:yellow;"&gt;
      &lt;md-grid-tile-footer&gt;
        &lt;h3&gt;#3: (1r x 1c)&lt;/h3&gt;
      &lt;/md-grid-tile-footer&gt;
    &lt;/md-grid-tile&gt;
    &lt;md-grid-tile  style="background-color:blue;"
      md-rowspan="2"&gt;
      &lt;md-grid-tile-footer&gt;
        &lt;h3&gt;#4: (2r x 1c)&lt;/h3&gt;
      &lt;/md-grid-tile-footer&gt;
    &lt;/md-grid-tile&gt;
    &lt;md-grid-tile  style="background-color:red;"
      md-rowspan="2" md-colspan="2" md-colspan-sm="1"&gt;
      &lt;md-grid-tile-footer&gt;
        &lt;h3&gt;#5: (2r x 2c)&lt;/h3&gt;
      &lt;/md-grid-tile-footer&gt;
    &lt;/md-grid-tile&gt;
    &lt;md-grid-tile  style="background-color:green;"
      md-rowspan="2" &gt;
      &lt;md-grid-tile-footer&gt;
        &lt;h3&gt;#6: (2r x 1c)&lt;/h3&gt;
      &lt;/md-grid-tile-footer&gt;
    &lt;/md-grid-tile&gt;
  &lt;/md-grid-list&gt;
&lt;/div&gt;

CSS

Javascript

Angular Material Design GRID

Link :

Fork button :

Embed preview :