// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source
//// /// @group grid ////
/// Sizes child elements so that `$n` number of items appear on each row. /// /// @param {Number} $n - Number of elements to display per row. /// @param {String} $selector ['.column'] - Selector(s) to use for child elements. @mixin grid-layout(
$n, $selector: '.column'
) {
& > #{$selector} { width: percentage(1/$n); float: $global-left; &:nth-of-type(1n) { clear: none; } &:nth-of-type(#{$n}n+1) { clear: both; } &:last-child { float: left; } }
}
/// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row. /// /// @param {Number} $n - Number of items that appear in each row. @mixin grid-layout-center-last($n) {
@for $i from 1 to $n { @if $i == 1 { &:nth-child(#{$n}n+1):last-child { margin-left: (100 - 100/$n * $i) / 2 * 1%; } } @else { &:nth-child(#{$n}n+1):nth-last-child(#{$i}) { margin-left: (100 - 100/$n * $i) / 2 * 1%; } } }
}