Le système de grille est-il cassé?

Question

J'utilise mdl 1.1.3 du cdn pour un projet de démonstration. Ma mise en page est

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

requêtes mdl @media me donne 75% de la div parent du 6-col-cellule.

@media (min-width: 480px) et (max-width: 839px)

• .mdl éléments - 1-col à 12,5%
• .mdl éléments - 2- col à 25%
• .mdl éléments - 3-col à 37,5%
• .mdl éléments - 4-col à 50% alors qu'il devrait être de 25%
• .mdl-cellule - 5 -col à 62,5%
• .mdl-cell - 6-col à 75% quand il devrait être de 50%
• .mdl éléments - 7-col à 87,5%
• .mdl cellules - 8-col à 100%
• .mdl éléments - 9-col à 100%
• .mdl- cellule - 10-col à 100%
• .mdl éléments - 11-col à 100%
• .mdl éléments - 12-col à 100%

est faute ou MDL I faire quelque chose de mal?

Answer 1

MDL site a donné la réponse.MDL a une approche différente pour le système de grille que d'autres frameworks CSS. Le nombre de cellules maximum est déférent pour différentes tailles d'écran.

• 12 cellules pour les écrans de bureau
• 8 cellules pour les comprimés
• 4 cellules pour les téléphones

qui dit pour une mise en page simple comme celle-ci nous devons coder comme ça

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