Create powerful multi-device layouts quickly and easily with the default 12-column, nest-able grid. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.
Start by adding an element with a class of
row. This will create a horizontal block to contain vertical columns. Then add divs with a column class within that row. You can use
columns - the only difference is grammar. Specify the widths of each column with the small-#, medium-#, and large-# classes.
.row .small-2.medium-3.large-4.columns .small-4.medium-6.large-4.columns .small-6.medium-3.large-4.columns .row .small-4.large-3.columns .small-4.large-6.columns .small-4.large-3.columns .row .small-3.medium-5.columns .small-9.medium-7.columns