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.