Ist das Gittersystem defekt?

Question

Ich benutze mdl 1.1.3 von der CDN für ein Demo-Projekt. Mein Layout ist

<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 Anfragen gibt mir 75% der Eltern div für die 6-col-Zelle.

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

• .mdl Zellen - 1-col bei 12,5%
• .mdl Zellen - 2- col bei 25%
• .mdl Zellen - 3-col bei 37,5%
• .mdl Zellen - 4-col bei 50%, wenn sie 25%
• .mdl-Zelle sein sollten - 5 -col bei 62,5%
• .mdl-Zelle - 6-col bei 75% wenn es 50% sein sollte
• .mdl Zellen - 7-col bei 87,5%
• .mdl Zellen - 8-col bei 100%
• .mdl Zellen - 9-col bei 100%
• .mdl- Zelle - 10-col bei 100%
• .mdl Zellen - 11-col bei 100%
• .mdl Zellen - 12-col bei 100%

Sind mdl Fehler oder I etwas falsch machen?

Answer 1

MDL-Site gab die Antwort.MDL hat einen anderen Ansatz für das Grid-System als andere CSS-Frameworks. Die Anzahl der maximalen Zellen ist für verschiedene Bildschirmgrößen unterschiedlich.

• 12 Zellen für Desktop-Bildschirme
• 8 Zellen für Tabletten
• 4 Zellen für Telefone

die oben wir für ein einfaches Layout wie die, gesagt haben, es wie dieses

codieren

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