Block Grid

Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of five images or paragraphs that need to stay evenly spaced no matter the screen size, the block grid is for you.



Basic

Use a simple small-block-grid-# class to code up the block grid and specify the number of items in a row.

HTML

<ul class="small-block-grid-3"> <li><!-- Your content goes here --></li> <li><!-- Your content goes here --></li> <li><!-- Your content goes here --></li> </ul>

Rendered HTML


Advanced

Use additional classes to specify a different number of items in a row for each screen size.

HTML

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4"> <li><!-- Your content goes here --></li> <li><!-- Your content goes here --></li> <li><!-- Your content goes here --></li> <li><!-- Your content goes here --></li> <li><!-- Your content goes here --></li> <li><!-- Your content goes here --></li> </ul>

Rendered HTML

If you use the small-block-grid only, the grid will keep its spacing and configuration no matter the screen size. If you use large-block-grid only, the list items will stack on top of each other for small devices. If you use both of those classes combined, you can control the configuration and layout separately for each breakpoint.


Customize with Sass

Block grids can be easily customized with the Sass variables provided in the _settings.scss file.

SCSS

// We use this to control the maximum blocks and spacing $block-grid-elements: 12; $block-grid-default-spacing: rem-calc(20); $align-block-grid-to-grid: false; //removes column gutter so edges of block grid align with grid // Enables media queries for block-grid classes. Set to false if writing semantic HTML. $block-grid-media-queries: true;

Semantic Markup With Sass Mixins

You apply block grid styles to semantic markup using Sass mixins.

Basic

You can use the block-grid(#) mixin to create your own block grid, like so:

SCSS

.your-class-name { @include block-grid(3); }

HTML

<ul class="your-class-name"> <li><img src="http://placehold.it/100x100" /></li> <li><img src="http://placehold.it/100x100" /></li> <li><img src="http://placehold.it/100x100" /></li> </ul>

Advanced

You can further customize your block grid using the provided options in the block-grid() mixin:

SCSS

.your-class-name { @include block-grid( // This controls how many elements will be on each row of the block grid. Set this to whatever number you need, up to the max allowed in the variable. // Available options: 1-12 by default, and false. $per-row: 3, // This controls how much space is between each item in the block grid. // Use a variable or any pixel or em values. $spacing: $block-grid-default-spacing, // This controls whether or not base styles come through, set to false to leave out. $base-style: true ); }

Clear Block Grid Rows

When you use mixins and you want to control the layout using different classes, add this snippet to your Sass:

SCSS

.your-small-class-name > li { clear: none !important; }

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/block-grid";




Building Blocks Using Block Grid


Want more? Check out all the hot Building Blocks ⇨

Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »