Block grids

Block grids give you a way to evenly split its child elements within x columns. You can resize your browser (or use the buttons in the doc) to see what happens

inspired on http://foundation.zurb.com/docs/components/block_grid.html

Usage

.grid-<BREAKPOINT>-<COLUMNS>

<breakpoint>

xs = small spartphones
sm = tablets
md = small desktop
lg = large desktop

<columns>

1-12 = number of columns

<div class="grid-xs-2 grid-sm-3 grid-md-4 grid-lg-5">
     <div class="cell"> <div class="well">1</div> </div>
     <div class="cell"> <div class="well">2</div> </div>
     <div class="cell"> <div class="well">3</div> </div>
     <div class="cell"> <div class="well">4</div> </div>
     <div class="cell"> <div class="well">5</div> </div>
     <div class="cell"> <div class="well">6</div> </div>
     <div class="cell"> <div class="well">7</div> </div>
     <div class="cell"> <div class="well">8</div> </div>
     <div class="cell"> <div class="well">9</div> </div>
</div>

block-grid

Block grids

Usage