Search code examples
csssassmixinsgrid-layout

sass grid mixin for unkown elements and unknown height

I wrote this sass grid mixin to use for when I want a gallery style grid with an unknown number of elements, it works greats as long as they are equal height.

@mixin part_of($num, $gutter_percent: $gutter_percent){
        margin-right: $gutter_percent;
        float: right;
        width: (100 - $gutter_percent * ($num - 1)) / $num;
        &:nth-of-type(#{$num}n+1){
        margin-right: 0;
        }
        &:nth-of-type(n+#{($num+1)}){
        margin-top:$gutter_percent;
        }
}

for the life of me I can't seem to make it work with unknown height, I know that I need to use the clear property somewhere but I'm not sure where.

Solution

  • Figured it out, I needed to add clear:both to every element on a new line