Грид-система сломана?

Question

Я использую MDL 1.1.3 из CDN для демонстрационного проекта. Мой макет

<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 столбцами.

@media (минимальная ширина: 480 пикселей) и (максимальная ширина:839 пикселей)

• .mdl-клетка - 1 цв, 12,5%
• .mdl-cell - 2-х элементный на 25%
• .mdl-клетка -3-кол. при 37,5%
• .mdl-cell -4-х элементный при 50%, когда должен быть 25%
• .mdl-cell - 5-col в 62,5%
• .mdl-cell -6-col в 75%, когда должно быть 50%
• .mdl-cell -7-кол. при 87,5%
• .mdl-cell -8-col в 100%
• .mdl-cell -9-цв на 100%
• .mdl-cell - 10-кол. на 100%
• .mdl-cell - 11-ти элементный на 100%
• .mdl-cell - 12-цв на 100%

Это ошибка MDL или я делаю что-то не так?

Answer 1

Сайт MDL дал ответ. У 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>