Grid System

Float Column

<div class="row"> <div class="column l3 m6 s12"> column </div> <div class="column l3 m6 s12"> column </div> <div class="column l3 m6 s12"> column </div> <div class="column l3 m6 s12"> column </div> </div>

Float Column Offset

column

<div class="row"> <div class="column l6 l6-offset m6 m6-offset s6 s6-offset"> column </div> </div>

Table Cell | Auto Width End Height

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum cumque similique hic deserunt blanditiis nihil at aspernatur, vel nam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum cumque similique hic deserunt blanditiis nihil at aspernatur, vel nam. Numquam voluptatibus harum, iste autem! Sapiente corrupti harum sed temporibus praesentium!

<div class="row-cell"> <div class="cell"> Lorem ipsum dolor sit amet </div> <div class="cell"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum cumque similique hic deserunt blanditiis nihil at aspernatur, vel nam. </div> <div class="cell"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum cumque similique hic deserunt blanditiis nihil at aspernatur, vel nam. Numquam voluptatibus harum, iste autem! Sapiente corrupti harum sed temporibus praesentium! </div> </div>

Flexbox Column

Flexbox Offset

flex

Grid

.grid{ padding: 0 8px; } .grid-t{ padding: 0 2px; } .grid-s{ padding: 0 4px; } .grid-m{ padding: 0 16px; } .grid-l{ padding: 0 24px; } .grid-g{ padding: 0 32px; } .grid-eq{ padding: 8px; } .grid-eq-t{ padding: 2px; } .grid-eq-s{ padding: 4px; } .grid-eq-m{ padding: 16px; } .grid-eq-l{ padding: 24px; } .grid-eq-g{ padding: 32px; } <div class="row grid"> <div class="column grid l3 m6 s12"> <div class="equal bg-silver"> column </div> </div> <div class="column grid l3 m6 s12"> <div class="equal bg-darkgray"> column </div> </div> <div class="column grid l3 m6 s12"> <div class="equal bg-gray"> column </div> </div> <div class="column grid l3 m6 s12"> <div class="equal bg-dimgray"> column </div> </div> </div> <div class="row-flex grid"> <div class="flex grid l3 m6 s12"> <div class="equal bg-silver"> flex </div> </div> <div class="flex grid l3 m6 s12"> <div class="equal bg-darkgray"> flex </div> </div> <div class="flex grid l3 m6 s12"> <div class="equal bg-gray"> flex </div> </div> <div class="flex grid l3 m6 s12"> <div class="equal bg-dimgray"> flex </div> </div> </div>