this is inline block grid with gutter options
/*
grid
*/
.grid-row {
font-size: 0;
letter-spacing: -0.4em;
// add gutter padding
@for $i from 1 to 10 {
$step: $i * 5;
&.grid-row-gutter-#{$step} {
[class^="grid-col-"] {
padding: 0 ($step * 1px);
}
}
}
// delete edge padding
&.grid-row-fit-edge {
[class^="grid-col-"] {
&:first-of-type {
padding-left: 0;
}
&:last-of-type {
padding-right: 0;
}
}
}
}
@for $i from 1 to 13 {
@for $j from 1 to 13{
@if $i >= $j {
.grid-col-#{$j}-#{$i} {
display: inline-block;
width: percentage($j / $i);
vertical-align: top;
letter-spacing: normal;
font-size: 14px;
font-size: 1rem;
}
}
}
}