재질 디자인 라이트 : 중첩 된 격자

Question

Google MDL을 사용하여 사이트를 구축하고 중첩 된 격자를 올바르게 사용하는 방법에 대해 궁금합니다.

모든 중첩 수준이 약간 오른쪽으로 이동합니다. 일부 제품을 나열하거나 다른 중첩 된 셀을 원할 때 상당히 이상합니다.

는 I'am 잘못된하지 :-)이 줄을 수직으로 유지하는 경우 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> 

그리드 내가 (알 참조하십시오. 제목, 내용, 제품 제목 및 그림이 완벽하게 정렬됩니다.

mdl-grid-no-spacing 클래스가 있지만 모든 간격이 제거됩니다. 세포 밑과 오른쪽에서도 말이야.

아마도 MDL 개념에 뭔가 빠졌거나 내 자신의 "그리드 클래스"를 코딩해야합니다. 아마도 내가

Answer 1

타다 :-) 잘못 다른 일을하고는 가능한 여기 codepen했습니다

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

그는 MDL 확장 것 nesting 수정 추가 :

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

마크 업 제공 외모 like :

<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을 처음 접했지만 블록, 요소 및 수정 자 (https://en.bem.info/methodology/quick-start/ 참조)의 자체 BEM 구조를 제공하여 기본 라이브러리를 확장하는 것이 여기 패러다임 인 것 같습니다. 그런 식으로 Bootstrap이나 Foundation과 조금 다릅니다.