Block Grid for Responsive Templates

Use the class small-block-grid-# on an unordered list to make a simple grid with # items in each row.

HTML

<ul class="small-block-grid-3">
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
</ul>

Advanced Use

Add size-specific classes to control how many items show on each row at different screen sizes. Sizes include: small-block-grid-#, medium-block-grid-# and large-block-grid-#

HTML

<ul class="large-block-grid-6 medium-block-grid-3 small-block-grid-2">
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
    <li><!--Your content goes here--></li>
</ul>

For more information, see Style Guide/Block Grid.