Block Grid

The Block Grid

The block grid is used when you need a grid of an unknown number of items. The recommended way to build block grids is with ul elements, but the classes work just fine on any element, like a div. Use your best judgement to keep the markup as semantic as possible.

To build a block grid, start with a <ul class="block-grid block-n-xs">, where n is a number from 1-6. These divisions can be changed across breakpoints by applying one or more of our grid suffix classes. Then, inside that list, create your items with <li class="block-grid__item">. If you want the same grid division across all breakpoints, use the default .block-n-xs class. Resize your browser to see the block grid suffixes in effect.

Note: Do not put any style utility classes on the block grid containers, nest them inside the list items instead.

No Gutters (Default)

By default, the block grid comes with no gutters.

<ul class="block-grid block-4-xs block-5-md block-6-xl">
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">1</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">2</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">3</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">4</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">5</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">6</div>
</li>
</ul>

Auto Gutters

To add automatic gutters between items in the block grid, apply the class .block-grid-gutters alongside your .block-grid class.

<ul class="block-grid block-2-xs block-3-lg block-6-xl block-grid-gutters">
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">1</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">2</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">3</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">4</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">5</div>
</li>
<li class="block-grid__item">
<div class="border-dark-xs round text-center-xs p-tb-05-xs">6</div>
</li>
</ul>

Default
Gutters