Block grid

Block grid is a very powerful grid in Foundation.

Block grids are a shorthand way to create equally-sized columns. Add a class of the format .[size]-up-[n] to change the number of columns within the row. By default, the max number of columns you can use with block grid are 8. Adding the .column-block class to columns will apply a bottom margin equal to the width of gutters.

It’s very useful for showing a collection of items into a grid.

<ul class="row small-up-2 medium-up-3 large-up-4">
  <li class="column column-block"><img src="http://placehold.it/300x200" alt="placeholder" /></li>
  ...
  <li class="column column-block"><img src="http://placehold.it/300x200" alt="placeholder" /></li>
</ul>

Block grid

Foundation provides small-block-grid-N, medium-block-grid-N and large-block-grid-N. It’s very convinent when we need to spread the content evenly inside a space.

<ul class="small-block-grid-2 medium-block-grid-4">
  <li><img src="http://placehold.it/300x200" alt="placeholder" /></li>
  ...
  <li><img src="http://placehold.it/300x200" alt="placeholder" /></li>
</ul>

Open example in jsFiddle

Block grid displayed in wide screen. Block grid displayed in wide screen.

Block grid displayed in small screen. Block grid displayed in small screen.