zurb-foundation-5/doc/pages/components/block_grid.html

Foundation 5 for npm (no code modification from original repo)

---
title: Block Grid
---

<h3 class="subheader">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.</h3>

***

{{> examples_block_basic}}

***

<h3>Basic</h3>

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

<div class="row">
  <div class="large-6 columns">
    <h4>HTML</h4>
    {{> examples_block_basic_rendered}}
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    {{> examples_block_basic}}
  </div>
</div>

***
<h3>Advanced</h3>

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

<div class="row">
  <div class="large-6 columns">
    <h4>HTML</h4>
    {{> examples_block_advanced_rendered}}
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    {{> examples_block_advanced}}
  </div></div>

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.

<h4>SCSS</h4>

{{> examples_block_variables}}

***

## Semantic Markup With Sass Mixins

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

<h3>Basic</h3>

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

<div class="row">
  <div class="large-6 columns">
    <h4>SCSS</h4>
{{#markdown}}
```scss
.your-class-name {
  @include block-grid(3);
}
```
{{/markdown}}
  </div>
  <div class="large-6 columns">
    <h4>HTML</h4>
{{#markdown}}
```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>
```
{{/markdown}}
  </div>
</div>

<h3>Advanced</h3>

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

<h4>SCSS</h4>

{{> examples_block_mixin_options}}


### Clear Block Grid Rows

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

<h4>SCSS</h4>

{{#markdown}}
```scss
.your-small-class-name > li {
  clear: none !important;
}
```
{{/markdown}}

<hr />

###Sass Errors?

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

<h4>SCSS</h4>

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