Skip to main content

Block Grid

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>
Rendered HTML
  • Item

  • Item

  • Item

  • Item

  • Item

  • Item


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>
Rendered HTML
  • Item

  • Item

  • Item

  • Item

  • Item

  • Item