Material Design Lite - 网格

Material Design Lite (MDL) 网格是一个用于针对不同屏幕尺寸布局内容的组件。MDL 网格由容器/div 元素定义和包围。网格在桌面尺寸屏幕中具有 12 列，在平板电脑尺寸屏幕中具有 8 列，在手机尺寸屏幕中具有 4 列，其中每个尺寸都有预定义的边距和装订线。单元格按照定义的顺序按顺序排列在一行中，但以下情况除外：

如果网格单元格不适合某一屏幕尺寸的行，它将流入下一行。
如果网格单元格的指定列大小等于或大于屏幕大小的列数，则它会占据整行。

MDL 提供各种 CSS 类，以将各种预定义的视觉和Behave增强应用于网格。下表列出了可用的类别及其效果。

先生。	类名和描述
1	MDL 布局将容器标识为 MDL 组件。外部容器元件上需要。
2	MDL-网格将容器标识为 MDL 网格组件。“外部”div 元素必需。
3	MDL细胞将容器标识为 MDL 单元。“内部”div 元素必需。
4	mdl-网格--无间距更新网格单元以使其之间没有边距。网格容器可选。
5	mdl-细胞--N-col 这有助于将单元格的列大小设置为 N，N 为 1-12（含），默认为 4；对于“内部”div 元素是可选的。
6	mdl-cell--N-col-桌面这有助于仅在桌面模式下将单元格的列大小设置为 N，N 为 1-12（含）；对于“内部”div 元素是可选的。
7	mdl-细胞--N-col-片剂这有助于仅在平板电脑模式下将单元格的列大小设置为 N，N 为 1-8（含）；对于“内部”div 元素是可选的。
8	mdl-cell--N-col-phone 这有助于仅在电话模式下将单元格的列大小设置为 N，N 为 1-4（含）；对于“内部”div 元素是可选的。
9	mdl-cell--隐藏桌面在桌面模式下隐藏单元格。对于“内部”div 元素是可选的。
10	mdl-cell--隐藏平板电脑在平板电脑模式下隐藏单元格。对于“内部”div 元素是可选的。
11	mdl-cell--隐藏电话处于电话模式时隐藏单元格。对于“内部”div 元素是可选的。
12	mdl-细胞--拉伸垂直拉伸单元格以填充父级，默认；对于“内部”div 元素是可选的。
13	mdl-细胞--顶部将单元格与父级的顶部对齐。对于“内部”div 元素是可选的。
14	mdl-细胞--中间将单元格与父单元格的中间对齐。对于“内部”div 元素是可选的。
15	MDL-单元格--底部将单元格与父级的底部对齐。对于“内部”div 元素是可选的。

例子

以下示例将帮助您了解如何使用 mdl-grid 类在各种屏幕上布局内容。

本示例将使用下面给出的 MDL 类。

mdl-layout - 将 div 标识为 MDL 组件。
mdl-js-layout - 将基本的 MDL Behave添加到外部 div。
mdl-layout--fixed-header - 使标题始终可见，即使在小屏幕中也是如此。
mdl-layout__header-row - 将容器标识为 MDL 标题行。
mdl-layout__drawer - 将 div 标识为 MDL 布局抽屉。
mdl-layout-title - 标识布局标题文本。
mdl-navigation - 将 div 标识为 MDL 导航组。
mdl-navigation__link - 将锚点标识为 MDL 导航链接。
mdl-layout__content - 将 div 标识为 MDL 布局内容。
mdl-grid - 将 div 标识为 MDL 网格组件。
mdl-cell - 将 div 标识为 MDL 单元。
mdl-cell--1-col - 将单元格的列大小设置为桌面屏幕大小中 12 个单元格中的 1 个单元格的大小。
mdl-cell--2-col - 将单元格的列大小设置为桌面屏幕大小中 12 个单元格中的 2 个单元格的大小。
mdl-cell--4-col - 将单元格的列大小设置为桌面屏幕大小中 12 个单元格中的 4 个单元格的大小。
mdl-cell--6-col - 将单元格的列大小设置为桌面屏幕大小中 12 个单元格中的 6 个单元格的列大小。
mdl-cell--4-col-phone - 将单元格的列大小设置为手机屏幕大小中 4 个单元格中的 4 个单元格的列大小。
mdl-cell--6-col-tablet - 将单元格的列大小设置为平板电脑屏幕大小中 8 个单元格中的 6 个单元格的大小。
mdl-cell--8-col-tablet - 将单元格的列大小设置为平板电脑屏幕大小中 8 个单元格中的 8 个单元格的列大小。

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>

结果

验证结果。