### Block Grids
-Block grids are a shorthand way to create equally-sized columns. Add a class of the format `.[size]-up-[n]` to change the number of columns within the row. By default, the max number of columns you can use with block grid are 8. Adding the `.block-grid-column` class to columns will apply a bottom margin equal to the width of gutters.
+Block grids are a shorthand way to create equally-sized columns. Add a class of the format `.[size]-up-[n]` to change the number of columns within the row. By default, the max number of columns you can use with block grid are 8. Adding the `.column-block` class to columns will apply a bottom margin equal to the width of gutters.
```html_example
<div class="row small-up-2 medium-up-3 large-up-4">
- <div class="column block-grid-column">
+ <div class="column column-block">
<img src="//placehold.it/600x600" class="thumbnail" alt="">
</div>
- <div class="column block-grid-column">
+ <div class="column column-block">
<img src="//placehold.it/600x600" class="thumbnail" alt="">
</div>
- <div class="column block-grid-column">
+ <div class="column column-block">
<img src="//placehold.it/600x600" class="thumbnail" alt="">
</div>
- <div class="column block-grid-column">
+ <div class="column column-block">
<img src="//placehold.it/600x600" class="thumbnail" alt="">
</div>
- <div class="column block-grid-column">
+ <div class="column column-block">
<img src="//placehold.it/600x600" class="thumbnail" alt="">
</div>
- <div class="column block-grid-column">
+ <div class="column column-block">
<img src="//placehold.it/600x600" class="thumbnail" alt="">
</div>
</div>
$offset: 'offset',
$end: 'end',
$expanded: 'expanded',
- $block-grid: 'block-grid'
+ $block: 'block'
) {
// Row
.#{$row} {
}
// Block grid columns
- .#{$block-grid}-#{$column} {
- @include block-grid-column;
+ .#{$column}-#{$block} {
+ @include grid-column-margin;
}
@if $column == 'column' {