Grid: Block Grid

Useful for galleries. Unlike "regular" grids, a block grid doesn't determine how wide columns are at different breakpoints. Rather, it determines how many total columns are visible at different breakpoints. Columns are all the same width.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9 
<ul class="grid grid--block grid--block-horz-[alignment] grid--block-vert-[alignment] grid--block-xs-2 grid--block-sm-3 grid--block-xl-5 grid--block-xxl-6">
    <li>
        <div>
            First Item
        </div>
    </li>
    [...]
    <li>
        <div>
            Last Item
        </div>
    </li>
</ul>

Horizontal Alignment

Block grid column contents can be horizontally aligned as needed.

  • Item 1
  • Item 2
  • Item 3 has a really, really long title that just going and going and going and going and going and going and going
  • Item 4
  • Item 5 has another long title that just keeps on going and I don't know how long it'll go but wow, it's a really long title that nobody's going to read unless they're bored out of their minds
  • Item 6
  • Item 7
  • Item 8

Vertical Alignment

Block grid column contents can be vertically aligned as needed.

  • Item 1
  • Item 2
  • Item 3 has a really, really long title that just going and going and going and going and going and going and going
  • Item 4
  • Item 5 has another long title that just keeps on going and I don't know how long it'll go but wow, it's a really long title that nobody's going to read unless they're bored out of their minds
  • Item 6
  • Item 7
  • Item 8