Another great grid feature is the block grid; the block grid basically takes the elements and sets them to take up an equal amount of space across the row. You can specify how many columns will be at each grid size, as shown in the following code; this is really useful for the thumbnails under a gallery of images:
<ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-6"> <li><img src="image.jpg"></li> <li><img src="image.jpg"></li> <li><img src="image.jpg"></li> <li><img src="image.jpg"></li> <li><img src="image.jpg"></li> <li><img src="image.jpg"></li> <li><img src="image.jpg"></li> <li><img src="image.jpg"></li> </ul>
Here is a diagram of how this will look on a medium screen:
You can wrap this ul block grid in a div tag with a row class and create some very complex layouts.