Material Design Lite / 栅格/Grid

栅格/Grid

MDL的栅格/Grid组件是响应式的，可以适应不同屏幕分辨率的布局要求：

mdl-grid

栅格/Grid组件根据屏幕尺寸大小，自动地分割行宽：

桌面（ > 840px） - 12个单元格
平板（ 480px ~ 840px）- 8个单元格
手机（ < 480px）- 4个单元格

可以使用mdl-cell--N-col样式声明单元格的宽度：

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col">...</div>    
    <div class="mdl-cell mdl-cell--4-col">...</div>    
    <div class="mdl-cell mdl-cell--4-col">...</div>    
</div>

在不同的分辨率下，示例栅格将呈现如下：

mdl-grid-2

如果我们希望在任何情况下，示例栅格总是显示为相同的列数，那么可以声明单元格在不同环境下的样式：

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">...</div>    
    <div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">...</div>    
</div>

在同一行的各单元格，默认情况下总是拉伸/stretch其高度（采用同一行中最高单元格的高度），可以使用 mdl-cell--bottom样式使单元格不拉伸，并将底部对齐：

mdl-cell--bottom

与之类似，mdl-cell--top使单元格顶部对齐，mdl-cell--middle使单元格居中对齐：

<div class="mdl-grid">
    <!--顶部对齐-->
    <div class="mdl-cell mdl-cell--top">...</div>
    <!--居中对齐-->
    <div class="mdl-cell mdl-cell--middle">...</div>
    <!--底部对齐-->
    <div class="mdl-cell mdl-cell--bottom">...</div>
</div>

配置选项

MDL class	说明
mdl-grid	将元素声明为grid组件
mdl-cell	将元素声明为grid组件的单元格cell
mdl-cell--N-col	设置单元格宽为N（1-12），默认为4。可选
mdl-cell--N-col-desktop	在桌面环境下设置单元格宽为N（1-12）。可选
mdl-cell--N-col-tablet	在平板环境下设置单元格宽为N（1-8）。可选
mdl-cell--N-col-phone	在手机环境下设置单元格宽为N（1-4）。可选
mdl-cell--hide-desktop	在桌面环境下隐藏该单元格。可选
mdl-cell--hide-tablet	在平板环境下隐藏该单元格。可选
mdl-cell--hide-phone	在手机环境下隐藏该单元格。可选
mdl-cell--stretch	在垂直方向拉伸单元格以充满父元素。这是单元格的默认值
mdl-cell--top	在垂直方向单元格顶部对齐。可选
mdl-cell--middle	在垂直方向单元格居中对齐。可选
mdl-cell--bottom	在垂直方向单元格底部对齐。可选

将示例代码中的第二行各单元格修改为垂直方向居中对齐。

Material Design Lite 互动版

栅格/Grid