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 has 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 the entire row.

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

Sr.No. Class Name & Description
1

mdl-layout

Identifies a container as an MDL component. Required on outer container element.
2

mdl-grid

Identifies a container as an MDL grid component. Required on "outer" div element.
3

mdl-cell

Identifies a container as an MDL cell. Required on "inner" div elements.
4

mdl-grid--no-spacing

Updates the grid cells to have no margin between them. Optional for grid container.
5

mdl-cell--N-col

This helps 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

This helps 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

This helps 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

This helps 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

Hides the cell when in desktop mode. Optional for "inner" div elements.
10

mdl-cell--hide-tablet

Hides the cell when in tablet mode. Optional for "inner" div elements.
11

mdl-cell--hide-phone

Hides the cell when in phone mode. Optional for "inner" div elements.
12

mdl-cell--stretch

Stretches the cell vertically to fill the parent, default; optional for "inner" div elements.
13

mdl-cell--top

Aligns the cell to the top of the parent. Optional for "inner" div elements.
14

mdl-cell--middle

Aligns the cell to the middle of the parent. Optional for "inner" div elements.
15

mdl-cell--bottom

Aligns the cell to the bottom of the parent. Optional for "inner" div elements.

Example

The following example will help you understand the use of the mdl-grid class to layout contents on various screens.

The MDL classes given below will be used in this example.

  • mdl-layout − Identifies a div as an MDL component.

  • mdl-js-layout − Adds basic MDL behavior to outer div.

  • mdl-layout--fixed-header − Makes the header always visible, even in small screens.

  • mdl-layout__header-row − Identifies container as MDL header row.

  • mdl-layout__drawer − Identifies div as MDL layout drawer.

  • mdl-layout-title − Identifies layout title text.

  • mdl-navigation − Identifies div as MDL navigation group.

  • mdl-navigation__link − Identifies anchor as MDL navigation link.

  • mdl-layout__content − Identifies div as MDL layout content.

  • mdl-grid − Identifies div as an MDL grid component.

  • mdl-cell − Identifies div as MDL cell.

  • mdl-cell--1-col − Sets the column size for the cell to that of 1 cell out of 12 cells in desktop screen size.

  • mdl-cell--2-col − Sets the column size for the cell to that of 2 cell out of 12 cells in desktop screen size.

  • mdl-cell--4-col − Sets the column size for the cell to that of 4 cell out of 12 cells in desktop screen size.

  • mdl-cell--6-col − Sets the column size for the cell to that of 6 cell out of 12 cells in desktop screen size.

  • 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.

  • 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.

  • 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

Live Demo 
<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.

Advertisements