---
title: Block Grid
---
***
{{> examples_block_basic}}
***
Basic
Use a simple `small-block-grid-#` class to code up the block grid and specify the number of items in a row.
HTML
{{> examples_block_basic_rendered}}
Rendered HTML
{{> examples_block_basic}}
***
Advanced
Use additional classes to specify a different number of items in a row for each screen size.
HTML
{{> examples_block_advanced_rendered}}
Rendered HTML
{{> examples_block_advanced}}
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
{{> examples_block_variables}}
***
## 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
{{#markdown}}
```scss
.your-class-name {
@include block-grid(3);
}
```
{{/markdown}}
HTML
{{#markdown}}
```html
```
{{/markdown}}
Advanced
You can further customize your block grid using the provided options in the `block-grid()` mixin:
SCSS
{{> 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:
SCSS
{{#markdown}}
```scss
.your-small-class-name > li {
clear: none !important;
}
```
{{/markdown}}
###Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
```scss
@import "foundation/components/block-grid";
```