网格系统坏了吗？

Question

我使用cdn中的mdl 1.1.3作为演示项目。我的布局是

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">div1</div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">div2</div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">div3</div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">div4</div>
</div>

mdl @media查询给了我75%的父div用于6-cell。

@media (最小宽度:480 max)和(最大宽度:839 max)

• ..mdl细胞- 12.5%
• ..mdl细胞- 25%
• ..mdl cell- 37.5%
• ..mdl细胞
• ..mdl细胞
• ..mdl cell
• ..mdl cell
• ..mdl细胞
• ..mdl细胞- 100%
• ..mdl细胞- 100%
• ..mdl细胞- 100%
• ..mdl细胞- 100%

是错还是我做错了什么？

Answer 1

MDL站点给出了answer.MDL与其他css框架不同的网格系统方法。不同屏幕大小的最大单元格数不同。

• 12个用于桌面屏幕的单元格
• 8细胞片
• 4个手机单元

也就是说，对于上面这样的简单布局，我们必须像这样对其进行编码

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">div1</div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">div2</div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">div3</div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">div4</div>
</div>