Material Design Lite: вложенная сетка

Question

Я создаю сайт с MDL от Google и задаюсь вопросом, как правильно работать с вложенными сетками.

Каждый уровень вложенности немного смещается вправо. Это становится довольно странным, когда вы просто хотите перечислить некоторые продукты или иметь другие вложенные ячейки.

См http://codepen.io/suntrop/pen/BQPody

<div class="mdl-grid"> 
    <div class="mdl-cell mdl-cell--8-col"> 
    <h1>Page Titel</h1> 
    <p>Some content</p> 
    <div class="mdl-grid"> 
     <div class="mdl-cell mdl-cell--6-col"> 
     Product #1 
      <div class="mdl-grid"> 
      <div class="mdl-cell mdl-cell--6-col"> 
       <img src="http://placehold.it/100" alt="" /> 
      </div> 
      <div class="mdl-cell mdl-cell--6-col"> 
       Product Description 
       <ul> 
       <li>One</li> 
       <li>Two</li> 
       <li>Three</li> 
       </ul> 
      </div> 
     </div> 
     </div> 
     <div class="mdl-cell mdl-cell--6-col"> 
     Products #2 <br /> 
     … 
     </div> 
    </div> 
    </div> 
    <div class="mdl-cell mdl-cell--4-col"> 
    <h3>Sidebar</h3> 
    </div> 
</div> 

Сетки я знаю (если I'am не ошибся :-) оставаться вертикально в линию. Таким образом, название, контент, название продукта и его изображение полностью выровнены.

Существует класс mdl-grid - no-spacing, но это устраняет все интервалы. Даже это под камерой и направо.

Возможно, я пропустил что-то в концепции MDL, или мне нужно закодировать собственный «класс сетки». Может быть, я делаю что-то другое неправильно :-)

Answer 1

Tadashi имеет codepen доступны здесь:

https://codepen.io/tadashi1105/pen/MwPOJx

Он продлил MDL, добавив nesting модификатор:

.mdl-grid .mdl-grid.mdl-grid--nesting { 
    padding: 0; 
    margin: 0 -8px; 
} 

разметке при условии, внешность например:

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

Я новичок в MDL, но расширяю основную библиотеку, предоставляя свою собственную структуру BEM - блоки, элементы и модификаторы (см. https://en.bem.info/methodology/quick-start/) - здесь парадигма. Таким образом, это немного отличается от Bootstrap или Foundation.