Hi. How can we help?

Block Grid

13 Mar 2018 in: Grid System

Block grid is great for displaying multiple items of equal width and height, like images, icons, etc...

Available Classes:

block-1 block-2 block-3 block-4 block-5 block-6 block-7 block-8

<div class="row phone-block-2 mobile-block-4 tablet-block-4 screen-block-6">
  <div class="column"> ... </div>
  <div class="column"> ... </div>
  <div class="column"> ... </div>
</div>

Note: we are using class column, instead of columns. Screen size preffix (screen-, tablet-, mobile-, phone-) is also needed for responsive layout.

as of v.5.5 grid chnages:

block- keyword has been removed and class .grid is added. Column class has been removed use .columns instead.

<div class="row grid phone-2 mobile-4 tablet-4 screen-6">
  <div class="columns"> ... </div>
  <div class="columns"> ... </div>
  <div class="columns"> ... </div>
</div>