@mixin wpSetColWidth($col-n: 2, $gutter-width: 10px, $area-width: 760px) {
$computed-width: floor(($area-width - (($col-n + 1) * $gutter-width)) / $col-n);
$remainder: $area-width - ($computed-width * $col-n) - ($gutter-width * ($col-n + 1));
width: $computed-width;
margin: $gutter-width 0;
margin-left: $gutter-width;
&:last-child {
width: $computed-width + $remainder;
}
}
// So if I wanted to use this I would set up some elements I want to align in columns.
ul.columns {
list-style: none;
padding: 0;
margin: 0;
li {
float: left;
display: block;
padding: 0;
margin: 0;
@include wpSetColWidth(3, 10px, 500px);
}
}
// Which compiles to:
ul.columns {
list-style: none;
padding: 0;
margin: 0; }
ul.columns li {
float: left;
display: block;
padding: 0;
margin: 0;
width: 153px;
margin: 10px 0;
margin-left: 10px; }
ul.columns li:last-child {
width: 154px; }
// See how it compensates for the uneven division and adjusts the last item in the list? Sweet.