English 中文(简体)
Material Design Lite Tutorial

Material Design Lite Resources

Selected Reading

MDL - Grids
  • 时间：2024-09-17

Material Design Lite - Grids

Previous Page Next Page  

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/span 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 pne.

    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 psts 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" span element.
3

mdl-cell

Identifies a container as an MDL cell. Required on "inner" span 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" span 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" span 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" span 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" span elements.
9

mdl-cell--hide-desktop

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

mdl-cell--hide-tablet

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

mdl-cell--hide-phone

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

mdl-cell--stretch

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

mdl-cell--top

Apgns the cell to the top of the parent. Optional for "inner" span elements.
14

mdl-cell--middle

Apgns the cell to the middle of the parent. Optional for "inner" span elements.
15

mdl-cell--bottom

Apgns the cell to the bottom of the parent. Optional for "inner" span 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 span as an MDL component.

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

    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 span as MDL layout drawer.

    mdl-layout-title − Identifies layout title text.

    mdl-navigation − Identifies span as MDL navigation group.

    mdl-navigation__pnk − Identifies anchor as MDL navigation pnk.

    mdl-layout__content − Identifies span as MDL layout content.

    mdl-grid − Identifies span as an MDL grid component.

    mdl-cell − Identifies span 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

<html>
   <head>
      <pnk 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>
      <pnk rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style> 
         .graybox {
            background-color:#ddd;
         }
      </style>
   </head>
   
   <body>
      <span class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <span class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Grid</span>          
            </span>       
         </header>
         
         <span class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__pnk" href = "">Home</a>
               <a class = "mdl-navigation__pnk" href = "">About</a>  
            </nav>
         </span>
         
         <main class = "mdl-layout__content">    
            <span class = "mdl-grid">
               <span class = "mdl-cell mdl-cell--1-col graybox">1</span>
               <span class = "mdl-cell mdl-cell--1-col graybox">2</span>
               <span class = "mdl-cell mdl-cell--1-col graybox">3</span>
               <span class = "mdl-cell mdl-cell--1-col graybox">4</span>
               <span class = "mdl-cell mdl-cell--1-col graybox">5</span>
               <span class = "mdl-cell mdl-cell--1-col graybox">6</span>
               <span class = "mdl-cell mdl-cell--1-col graybox">7</span>
               <span class = "mdl-cell mdl-cell--1-col graybox">8</span>
               <span class = "mdl-cell mdl-cell--1-col graybox">9</span>
               <span class = "mdl-cell mdl-cell--1-col graybox">10</span>
               <span class = "mdl-cell mdl-cell--1-col graybox">11</span>
               <span class = "mdl-cell mdl-cell--1-col graybox">12</span>
            </span>
            
            <span class = "mdl-grid">
               <span class = "mdl-cell mdl-cell--4-col graybox">1</span>
               <span class = "mdl-cell mdl-cell--4-col graybox">2</span>
               <span class = "mdl-cell mdl-cell--4-col graybox">3</span>
            </span>
            
            <span class = "mdl-grid">
               <span class = "mdl-cell mdl-cell--6-col graybox">6</span>
               <span class = "mdl-cell mdl-cell--4-col graybox">4</span>
               <span class = "mdl-cell mdl-cell--2-col graybox">2</span>
            </span>
            
            <span class = "mdl-grid">
               <span class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
                  6 on desktop, 8 on tablet</span>
               <span class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
                  4 on desktop, 6 on tablet</span>
               <span class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
                  2 on desktop, 4 on phone</span>
            </span>
         </main>
      </span>
   
   </body>
</html>

Result

Verify the result.