Material Design Lite - Grids

The Material Design Lite (MDL) grid is a component for laying out content for varying screen sizes. The MDL grid is defined and enclosed by a container/div element. 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, with following exceptions:

• If a grid cell is not fit for the row in one of the screen sizes, it flows into the following line.
• If a grid cell has a specified column size equal to or larger than the number of columns for the screen size, it takes up entire row.

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the grid. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	mdl-layout Identifies a container as an MDL component. Required on outer container element.
2	mdl-grid To Identify a container as an MDL grid component. Requiring to be on "outer" div element.
3	mdl-cell To Identify a container as an MDL cell. Requiring to be on "inner" div elements.
4	mdl-grid--no-spacing To update the grid cells to have no margin between them. Optional for grid container.
5	mdl-cell--N-col To put the column size for the cell to N, N is 1-12 inclusive, defaults to 4; optional for "inner" div elements.
6	mdl-cell--N-col-desktop To put the column size for the cell to N in desktop mode only, N is 1-12 inclusive; optional for "inner" div elements.
7	mdl-cell--N-col-tablet To put the column size for the cell to N in tablet mode only, N is 1-8 inclusive; optional for "inner" div elements.
8	mdl-cell--N-col-phone To put the column size for the cell to N in phone mode only, N is 1-4 inclusive; optional for "inner" div elements.
9	mdl-cell--hide-desktop To hide the cell when in desktop mode. Optional for "inner" div elements.
10	mdl-cell--hide-tablet To hide the cell when in tablet mode. Optional for "inner" div elements.
11	mdl-cell--hide-phone To hide the cell when in phone mode. Optional for "inner" div elements.
12	mdl-cell--stretch To stretch the cell vertically to fill the parent, default; optional for "inner" div elements.
13	mdl-cell--top To align the cell to the top of the parent. Optional for "inner" div elements.
14	mdl-cell--middle To align the cell to the middle of the parent. Optional for "inner" div elements.
15	mdl-cell--bottom To align the cell to the bottom of the parent. Optional for "inner" div elements.

Example

The following example showcases the use of mdl-grid class to layout contents on various screens.
Here following MDL classes are used.

1. mdl-layout - Identifies a div as an MDL component.
2. mdl-js-layout - Adds basic MDL behavior to outer div.
3. mdl-layout--fixed-header - Makes the header always visible, even in small screens.
4. mdl-layout__header-row - Identifies container as MDL header row.
5. mdl-layout__drawer - Identifies div as MDL layout drawer.
6. mdl-layout-title - Identifies layout title text.
7. mdl-navigation - Identifies div as MDL navigation group.
8. mdl-navigation__link - Identifies anchor as MDL navigation link.
9. mdl-layout__content - Identifies div as MDL layout content.
10. mdl-grid - Identifies div as an MDL grid component.
11. mdl-cell - Identifies div as MDL cell.
12. mdl-cell--1-col - Sets the column size for the cell to that of 1 cell out of 12 cells in desktop screen size.
13. mdl-cell--2-col - Sets the column size for the cell to that of 2 cell out of 12 cells in desktop screen size.
14. mdl-cell--4-col - Sets the column size for the cell to that of 4 cell out of 12 cells in desktop screen size.
15. mdl-cell--6-col - Sets the column size for the cell to that of 6 cell out of 12 cells in desktop screen size.
16. mdl-cell--4-col-phone - Sets the column size for the cell to that of 4 cell out of 4 cells in phone screen size.
17. mdl-cell--6-col-tablet - Sets the column size for the cell to that of 6 cell out of 8 cells in tablet screen size.
18. mdl-cell--8-col-tablet - Sets the column size for the cell to that of 8 cell out of 8 cells in tablet screen size.

mdl_grid.htm

<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <style> 
         .graybox {
            background-color:#ddd;
         }
      </style>
   </head>
<body>
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">      
            <span class="mdl-layout-title">Material Design Grid</span>          
         </div>       
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">Material Design Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>  
         </nav>
      </div>
      <main class="mdl-layout__content">    
         <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--1-col graybox">1</div>
            <div class="mdl-cell mdl-cell--1-col graybox">2</div>
            <div class="mdl-cell mdl-cell--1-col graybox">3</div>
            <div class="mdl-cell mdl-cell--1-col graybox">4</div>
            <div class="mdl-cell mdl-cell--1-col graybox">5</div>
            <div class="mdl-cell mdl-cell--1-col graybox">6</div>
            <div class="mdl-cell mdl-cell--1-col graybox">7</div>
            <div class="mdl-cell mdl-cell--1-col graybox">8</div>
            <div class="mdl-cell mdl-cell--1-col graybox">9</div>
            <div class="mdl-cell mdl-cell--1-col graybox">10</div>
            <div class="mdl-cell mdl-cell--1-col graybox">11</div>
            <div class="mdl-cell mdl-cell--1-col graybox">12</div>
         </div>
         <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--4-col graybox">1</div>
            <div class="mdl-cell mdl-cell--4-col graybox">2</div>
            <div class="mdl-cell mdl-cell--4-col graybox">3</div>
         </div>
         <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--6-col graybox">6</div>
            <div class="mdl-cell mdl-cell--4-col graybox">4</div>
            <div class="mdl-cell mdl-cell--2-col graybox">2</div>
         </div>
         <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">6 on desktop, 8 on tablet</div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">4 on desktop, 6 on tablet</div>
            <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">2 on desktop, 4 on phone</div>
         </div>
      </main>
   </div>
</body>
</html>

Result

Verify the result.