Float Column
column
column
column
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
flex
flex
flex
flex
<div class="row-flex"> <div class="flex l3 m6 s12"> flex </div> <div class="flex l3 m6 s12"> flex </div> <div class="flex l3 m6 s12"> flex </div> <div class="flex l3 m6 s12"> flex </div> </div>
Flexbox Offset
flex
<div class="row-flex"> <div class="flex l6 m6 s6"> </div> <div class="flex l6 m6 s6"> flex </div> </div>
Grid
column
column
column
column

flex
flex
flex
flex
.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>