Newest ⟷ Oldest
  1. Snapshot at 2017-04-12

    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>
    
  2. Snapshot at 2017-04-11

    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.