<div class="demo-preview-block"> <div class="demo-ruler mdl-grid"> <div class="mdl-cell mdl-cell--1-col">1</div> <div class="mdl-cell mdl-cell--1-col">1</div> <div class="mdl-cell mdl-cell--1-col">1</div> <div class="mdl-cell mdl-cell--1-col">1</div> <div class="mdl-cell mdl-cell--1-col">1</div> <div class="mdl-cell mdl-cell--1-col">1</div> <div class="mdl-cell mdl-cell--1-col">1</div> <div class="mdl-cell mdl-cell--1-col">1</div> <div class="mdl-cell mdl-cell--1-col">1</div> <div class="mdl-cell mdl-cell--1-col">1</div> <div class="mdl-cell mdl-cell--1-col">1</div> <div class="mdl-cell mdl-cell--1-col">1</div> </div> <br/> <div class="demo-grid-1 mdl-grid"> <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> <br/> <div class="demo-grid-2 mdl-grid"> <div class="mdl-cell mdl-cell--6-col">6</div> <div class="mdl-cell mdl-cell--4-col">4</div> <div class="mdl-cell mdl-cell--2-col">2</div> </div> <br/> <div class="demo-grid-3 mdl-grid"> <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">6<br/>(8 tablet)</div> <div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet">4<br/>(6 tablet)</div> <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">2<br/>(4 phone)</div> </div> </div>