Angular Material – Grids


Angular Material – Grids


”;


Previous

Next

The md-grid-list, an Angular directive, is a component for laying out content for varying screen sizes. A grid has 12 columns in the desktop size screen, 8 in the tablet size screen, and 4 in the phone size screen, where each size have predefined margins and gutters. Cells are laid out in sequential manner in a row, in the order they are defined.

Attributes

The following table lists out the parameters and description of the different attributes of md-grid-list.







Sr.No Parameter & Description
1

* md-cols

This is for the number of columns in the grid.
2

* md-row-height

One of

  • CSS length − Fixed height rows (eg. 8px or 1rem).

  • {width}:{height} − Ratio of width to height (eg. md-row-height = “16:9”).

  • “fit” − Height will be determined by subdividing the available height by the number of rows.
3

md-gutter

The amount of space between tiles in CSS units (default 1px).
4

md-on-layout

Expression to evaluate after layout. Event object is available as $event, and contains performance information.

Example

The following example shows the use of the md-grid-list directive and also the uses of grid.

am_grid.htm


Live Demo 


<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language = "javascript">
         angular
            .module(''firstApplication'', [''ngMaterial''])
            .controller(''gridController'', gridController);

         function gridController ($scope) {
            var COLORS = [
               ''#ffebee'', ''#ffcdd2'', ''#ef9a9a'', ''#e57373'', ''#ef5350'', ''#f44336'',
               ''#e53935'', ''#d32f2f'', ''#c62828'', ''#b71c1c'', ''#ff8a80'', ''#ff5252'',
               ''#ff1744'', ''#d50000'', ''#f8bbd0'', ''#f48fb1'', ''#f06292'', ''#ec407a'',
               ''#e91e63'', ''#d81b60'', ''#c2185b'', ''#ad1457'', ''#880e4f'', ''#ff80ab'',
               ''#ff4081'', ''#f50057'', ''#c51162'', ''#e1bee7'', ''#ce93d8'', ''#ba68c8'',
               ''#ab47bc'', ''#9c27b0'', ''#8e24aa'', ''#7b1fa2'', ''#4a148c'', ''#ea80fc'',
               ''#e040fb'', ''#d500f9'', ''#aa00ff'', ''#ede7f6'', ''#d1c4e9'', ''#b39ddb'',
               ''#9575cd'', ''#7e57c2'', ''#673ab7'', ''#5e35b1'', ''#4527a0'', ''#311b92'',
               ''#b388ff'', ''#7c4dff'', ''#651fff'', ''#6200ea'', ''#c5cae9'', ''#9fa8da'',
               ''#7986cb'', ''#5c6bc0'', ''#3f51b5'', ''#3949ab'', ''#303f9f'', ''#283593'',
               ''#1a237e'', ''#8c9eff'', ''#536dfe'', ''#3d5afe'', ''#304ffe'', ''#e3f2fd'',
               ''#bbdefb'', ''#90caf9'', ''#64b5f6'', ''#42a5f5'', ''#2196f3'', ''#1e88e5'',
               ''#1976d2'', ''#1565c0'', ''#0d47a1'', ''#82b1ff'', ''#448aff'', ''#2979ff'',
               ''#2962ff'', ''#b3e5fc'', ''#81d4fa'', ''#4fc3f7'', ''#29b6f6'', ''#03a9f4'',
               ''#039be5'', ''#0288d1'', ''#0277bd'', ''#01579b'', ''#80d8ff'', ''#40c4ff'',
               ''#00b0ff'', ''#0091ea'', ''#e0f7fa'', ''#b2ebf2'', ''#80deea'', ''#4dd0e1'',
               ''#26c6da'', ''#00bcd4'', ''#00acc1'', ''#0097a7'', ''#00838f'', ''#006064'',
               ''#84ffff'', ''#18ffff'', ''#00e5ff'', ''#00b8d4'', ''#e0f2f1'', ''#b2dfdb'',
               ''#80cbc4'', ''#4db6ac'', ''#26a69a'', ''#009688'', ''#00897b'', ''#00796b'',
               ''#00695c'', ''#a7ffeb'', ''#64ffda'', ''#1de9b6'', ''#00bfa5'', ''#e8f5e9'',
               ''#c8e6c9'', ''#a5d6a7'', ''#81c784'', ''#66bb6a'', ''#4caf50'', ''#43a047'',
               ''#388e3c'', ''#2e7d32'', ''#1b5e20'', ''#b9f6ca'', ''#69f0ae'', ''#00e676'',
               ''#00c853'', ''#f1f8e9'', ''#dcedc8'', ''#c5e1a5'', ''#aed581'', ''#9ccc65'',
               ''#8bc34a'', ''#7cb342'', ''#689f38'', ''#558b2f'', ''#33691e'', ''#ccff90'',
               ''#b2ff59'', ''#76ff03'', ''#64dd17'', ''#f9fbe7'', ''#f0f4c3'', ''#e6ee9c'',
               ''#dce775'', ''#d4e157'', ''#cddc39'', ''#c0ca33'', ''#afb42b'', ''#9e9d24'',
               ''#827717'', ''#f4ff81'', ''#eeff41'', ''#c6ff00'', ''#aeea00'', ''#fffde7'',
               ''#fff9c4'', ''#fff59d'', ''#fff176'', ''#ffee58'', ''#ffeb3b'', ''#fdd835'',
               ''#fbc02d'', ''#f9a825'', ''#f57f17'', ''#ffff8d'', ''#ffff00'', ''#ffea00'',
               ''#ffd600'', ''#fff8e1'', ''#ffecb3'', ''#ffe082'', ''#ffd54f'', ''#ffca28'',
               ''#ffc107'', ''#ffb300'', ''#ffa000'', ''#ff8f00'', ''#ff6f00'', ''#ffe57f'',
               ''#ffd740'', ''#ffc400'', ''#ffab00'', ''#fff3e0'', ''#ffe0b2'', ''#ffcc80'',
               ''#ffb74d'', ''#ffa726'', ''#ff9800'', ''#fb8c00'', ''#f57c00'', ''#ef6c00'',
               ''#e65100'', ''#ffd180'', ''#ffab40'', ''#ff9100'', ''#ff6d00'', ''#fbe9e7'',
               ''#ffccbc'', ''#ffab91'', ''#ff8a65'', ''#ff7043'', ''#ff5722'', ''#f4511e'',
               ''#e64a19'', ''#d84315'', ''#bf360c'', ''#ff9e80'', ''#ff6e40'', ''#ff3d00'',
               ''#dd2c00'', ''#d7ccc8'', ''#bcaaa4'', ''#795548'', ''#d7ccc8'', ''#bcaaa4'',
               ''#8d6e63'', ''#eceff1'', ''#cfd8dc'', ''#b0bec5'', ''#90a4ae'', ''#78909c'',
               ''#607d8b'', ''#546e7a'', ''#cfd8dc'', ''#b0bec5'', ''#78909c''
            ];
            
            this.colorTiles = (function() {
               var tiles = [];
               for (var i = 0; i < 46; i++) {
                  tiles.push ({
                     color: randomColor(),
                     colspan: randomSpan(),
                     rowspan: randomSpan()
                  });
               }
               return tiles;
            })();
            
            function randomColor() {
               return COLORS[Math.floor(Math.random() * COLORS.length)];
            }
            
            function randomSpan() {
               var r = Math.random();
               if (r < 0.8) {
                  return 1;
               } else if (r < 0.9) {
                  return 2;
               } else {
                  return 3;
               }
            }      
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "gridContainer" ng-controller = "gridController as ctrl" ng-cloak>
         <md-content layout-padding>
            <md-grid-list
               md-cols-gt-md = "12" md-cols-sm = "3" md-cols-md = "8"
               md-row-height-gt-md = "1:1" md-row-height = "4:3"
               md-gutter-gt-md = "16px" md-gutter-gt-sm = "8px" md-gutter = "4px">
               
               <md-grid-tile
                  ng-repeat = "tile in ctrl.colorTiles"
                  ng-style = "{
                     ''background'': tile.color
                  }"
                  md-colspan-gt-sm = "{{tile.colspan}}"
                  md-rowspan-gt-sm = "{{tile.rowspan}}">
               </md-grid-tile>
               
            </md-grid-list>
         </md-content>
      </div>
   </body>
</html>

Result

Verify the result.